删除滤镜模糊 CSS 周围的深色边框

>我遇到了问题，经过大量搜索后我找不到任何解决方案。

我正在使用 css 过滤器：div 上的模糊，但它在div 周围创建深色边框几乎就像小插图一样

如何删除它？

使用 CSS3 模糊滤镜时图像周围出现白色模糊？

我正在寻找一种不包括像上面那样增加div 规模的解决方案

body {
margin: 0;
padding: 0;
background: #000;
}
div {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);

width:100vw;
height:100vh;
object-fit: contain;
border:none;

}

img {
width: 100%;
}

<body>
<div>
<img src="https://resize.hswstatic.com/w_907/gif/tesla-cat.jpg" />
</div>
</body>

解决方案：当您使用深色背景颜色时，这是在元素上css模糊的正常行为，在这种情况下，您使用黑色背景，所以当您使用时blur发生这种情况！为了避免这种情况，您应该做一个技巧，在您的图像上使用transform: scale，并使父overflow: hidden具有一定的width和height

body {
margin: 0;
padding: 0;
background: #000;
}
#pic img {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
object-fit: contain;
transform: scale(1.1);
}
#pic {
width: 100vw;
height: 100vh;
overflow: hidden
}
img {
width: 100%;
}

<body>
<div id="pic">
<img src="https://resize.hswstatic.com/w_907/gif/tesla-cat.jpg" />
</div>
</body>

具有黑色(#000(背景的body将合并到图像中。要更改此设置，您可以为包含图像的<div>提供白色(#fff(背景。

请注意，在这种情况下，白色会合并到图像的边缘，给出白色边框，您可能会接受也可能不会接受。

body {
margin: 0;
padding: 0;
background: #000;
}
div {
width: fit-content;
height: fit-content;
object-fit: contain;
border: none;
overflow: hidden;
background: #fff;
}
img {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
width: 100%;
}

<div>
<img src="https://resize.hswstatic.com/w_907/gif/tesla-cat.jpg" />
</div>

不要模糊div，而是模糊 img 并将 img 缩放到 1.1

这种方式不会产生任何软"边界">

body {
margin: 0;
padding: 0;
background: #000;
}
div {    
width: fit-content;
height: fit-content;
object-fit: contain;
border: none;
overflow: hidden;
}

img {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
width: 100%;
transform: scale(1.1)
}

<body>
<div>
<img src="https://resize.hswstatic.com/w_907/gif/tesla-cat.jpg" />
</div>
</body>

尝试使用父容器，图像大小稍大，边距为负。红色边框仅用于说明目的，可以删除。

body {
margin: 0;
padding: 0;
background: #000;
}
.blur_img {
box-sizing: border-box;
border: 1px solid #f00;
object-fit: contain;
overflow: hidden;
}

.blur_img img {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
width: calc(100% + 12px);
height: calc(100% + 12px);
margin: -6px;
}

<body>
<div>
<div class="blur_img">
<img src="https://resize.hswstatic.com/w_907/gif/tesla-cat.jpg" />
</div>
</div>
</body>

相关内容

最新更新

热门标签：