最新答案（2020年3月）

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）。试一试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); 
}

Answer 2

最新答案（2020年3月）

通过在覆盖元素上使用backdrop-filter，仅用CSS即可达到这种效果。

 .background-image::before {
  content: "";
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(5px); /* apply the blur */
  backdrop-filter: blur(5px);         /* apply the blur */
  pointer-events: none; /* make the pseudo class click-through */
}

.background-image {
  position: relative;
  width: 710px;
  height: 444px;
  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;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
 }

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

请记住，这不是IE中的supported，只有在明确启用的情况下，它才在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

padding: 10px 10px;

在你的css中添加它以删除底部的白色模糊边框

Answer 5

如果要删除图片周围的白色边框，可以使用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 6

我在容器中添加了一个负余量：margin: -5px

Answer 7

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

Answer 8

我注意到白色边框来自人体的背景颜色。如果将其设置为其他颜色，则可以看到白色边框颜色更改为您设置的任何颜色。

只需这样做

body {
  background-color: black; //or whatever color is nearest to your blurred background
}

Answer 9

这是我根据@Prime的答案确定的功能。

为使其正常工作，必须将图像放置在<div/>内，该图像应具有图像的width和height（明确设置）。

    function addBlur(style, radius) {
      return {
        ...style,
        // https://caniuse.com/#feat=css-filters
        filter: `blur(${radius}px)`,
        // Works around the white edges bug.
        // https://stackoverflow.com/questions/28870932/how-to-remove-white-border-from-blur-background-image
        width: `calc(100% + ${2 * radius}px)`,
        height: `calc(100% + ${2 * radius}px)`,
        marginLeft: `-${radius}px`,
        marginTop: `-${radius}px`
      }
    }

Answer 10

如果白色边框是由主体的背景色引起的，请在margin: 0;上应用body，因为默认情况下边距不为0；

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

10 个答案:

最新答案（2020年3月）