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

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

padding: 10px 10px;

将此添加到您的 css 中以移除底部的白色模糊边框

Answer 2

我已经添加了overflow、padding甚至margin，但是问题还是没有解决。所以我试着在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 fiddle

http://jsfiddle.net/2pgdttLh/

Answer 3

我在容器中添加了负边距：margin: -5px

Answer 4

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

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

Answer 6

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

为了使其正常工作，图像必须位于具有图像的 width 和 height 的 <div/> 内（明确设置）。

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

Answer 7

如果白边是正文背景颜色造成的，请在body上应用margin: 0;，因为默认情况下边距不是0；

Answer 8

最新答案 (2022)

通过在叠加元素上使用 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>

请记住，这不是 supported 在 IE 中，只有在明确启用的情况下才能在 firefox 中使用。

Answer 9

使用 SVG 模糊滤镜。

filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='4' result='b'/%3E%3CfeMorphology operator='dilate' radius='4'/%3E %3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in='b'/%3E%3C/feMerge%3E%3C/filter%3E %3C/svg%3E#a");

“stdDeviation”是您的强度。

source

Answer 10

模糊增加了边缘的透明度，因此您需要做的就是删除 alpha 通道。

这里有几个示例，说明如何使用 SVG 滤镜执行此操作。

<filter id="omega"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0 1"/></filter>

<filter id="omega"><feComponentTransfer><feFuncA type="linear" slope="10"/></feComponentTransfer></filter>

您可以在 SVG filter 中立即实现模糊，或者在模糊后添加滤镜以去除透明度

filter: blur(50px) url(#omega);

或纯CSS

filter: blur(50px) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="a"><feComponentTransfer><feFuncA type="linear" slope="10"/></feComponentTransfer></filter>#a');

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

How to remove white border from blur background image

html

css

blur

最新答案 (2022)