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

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

最简单的方法是添加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); 
}

Answer 2

最新答案 (2021)

您可以通过backdrop-filter在覆盖元素上使用 css 来实现此效果。

.blurred::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px); /* apply the blur */
  pointer-events: none; /* make the overlay click-through */
}

.blurred {
  position: relative;
  width: 500px;
  height: 300px;
  background: no-repeat center center;
  background-image: url('https://besthqwallpapers.com/Uploads/26-5-2019/94041/thumb2-tesla-model-x-2019-exterior-front-view-new-gray-model-x.jpg');
  background-size: cover;
}

<div class="blurred"></div>

请记住，这在 IE 中不受支持，并且只有在明确启用的情况下才能在 Firefox 中工作。

Answer 3

我已经添加了溢出,填充甚至边距,但仍然没有解决问题.所以我试图在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;

 }

小提琴

http://jsfiddle.net/2pgdttLh/

Answer 4

这对我有用：添加了两个固定图像，一个 z=-1，另一个 z=0，模糊了第一个图像。