Как удалить белую рамку из размытия фонового изображения

Question

Как удалить границу белого размытия из фонового изображения.

<div class="background-image"></div> 

CSS, я попытался добавление маржи: -10px, но он не работает

.background-image { 
    background: no-repeat center center fixed; 
    background-image: url('http://www.hdpaperz.com/wallpaper/original/windows-8-wallpapers-2560x1600-2311_1.jpg') ; 
    background-size: cover; 
    display: block; 
    height: 100%; 
    left: -5px; 
    top:-5px; 
    bottom:-5px; 
    position: fixed; 
    right: -5px; 
    z-index: 1; 
    margin:0px auto; 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 

} 

http://jsfiddle.net/maio/8wq132nd/1/

Answer 1

Я добавил перелива, обивка и даже запас, но до сих пор эта проблема не решена. Поэтому я попытался дать тег изображения между div. Задача решена.

<div class="background-image"> 
<img src="http://www.hdpaperz.com/wallpaper/original/windows-8-wallpapers-2560x1600-2311_1.jpg" width="100%" height="100%"/> 
</div> 

CSS

.background-image { 
    background: no-repeat center center fixed; 
    background-size: cover; 
    display: block; 
    left: -5px; 
    top:-5px; 
    bottom:-5px; 
    position: fixed; 
    right: -5px; 
    z-index: 1; 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    margin:-5px; 

} 

JS скрипку

http://jsfiddle.net/2pgdttLh/

Answer 2

padding: 10px 10px; 

добавить это в CSS, чтобы удалить белую размытость границы для нижнего

Answer 3

Если вы хотите удалить белую рамку вокруг изображения, вы можете использовать свойство css Clip.

Вы можете прочитать здесь

http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

http://demosthenes.info/blog/534/Cross-browser-Image-Blur-with-CSS

Answer 4

я добавил отрицательный запас в контейнере: margin: -5px

Answer 5

Самый простой способ сделать это состоит в добавлении преобразования : шкала (1.1). Попробуйте here.

#overlay { 
position: fixed; 
left: 22.5em; 
top: 3em; 
height: 75%; 
width: 50%; 
background: url("https://s-media-cacheak0.pinimg.com/originals/ae/b4/c5/aeb4c53cab2b550187644af503a0f17e.png"); 
background-size: cover; 
filter: blur(9px); 
transform: scale(1.1); 
}