如何从模糊背景图像中去除白色边框

Question

如何从背景图像中去除白色模糊边框。

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

CSS，我尝试添加 margin:-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/

原文由 Prime 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/

原文由 Prime 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

最简单的方法是添加 transform: scale(1.1)。 在这里 试试。

 #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);
}

原文由 Moaaz 发布，翻译遵循 CC BY-SA 3.0 许可协议