CSS-模糊背景img，但它也适用于它前面的img[重复]
我将模糊过滤器应用于包装器div的背景图像。出于某种原因，模糊过滤器也应用于包装器div中的img元素。
#wrapper-5 {
background: url("https://i.picsum.photos/id/1062/600/400.jpg") no-repeat;
filter: blur(5px);
}
#img-5 {
clip-path: circle(30%);
filter: grayscale(80%);
}<div id="wrapper-5">
<img id="img-5" src="https://i.picsum.photos/id/1062/600/400.jpg" width="600" alt="doggie" />
</div>共有1个答案
这是意料之中的，您正在模糊父元素而不是背景，这将包括所有子元素。
使用伪元素代替并模糊它。
#wrapper-5 {
position: relative;
}
#wrapper-5:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url("https://i.picsum.photos/id/1062/600/400.jpg") no-repeat;
filter: blur(5px);
}
#img-5 {
clip-path: circle(30%);
filter: grayscale(80%);
}<div id="wrapper-5">
<img id="img-5" src="https://i.picsum.photos/id/1062/600/400.jpg" width="600" alt="doggie" />
</div>-
我做了这个例子。 我试图模糊背景图像，但主要内容也模糊了（
-
在CSS中使用filter:blur（）函数时出现问题。首先，它不会出现，其次它会模糊整个DIV。 编辑：现在用图像和其他css编辑，我之前没有包括。 这是我的HTML/CSS：
-
问题内容： 我希望网站上的弹出窗口具有 Vista/7航空玻璃风格的效果，并且它必须是动态的。我很好这不是一个跨浏览器的效果，只要该网站仍然 _适用_于所有现代浏览器。 我的第一次尝试是使用类似 但是，正如我应该预期的那样， 这导致 对话框的 内容 模糊并且背景保持清晰。 有什么方法可以使用CSS来模糊半透明元素的背景而不是其内容？ 问题答案： 由于除FF以外，其他浏览器似乎未广泛支持该属性，因此
-
问题内容： 编辑现有答案以改善此职位。它目前不接受新的答案或互动。 在什么情况下，与CSS相对，使用HTML 标签显示图像更合适，反之亦然？ 影响因素可能包括可访问性，浏览器支持，动态内容或任何类型的技术限制或可用性原则。 问题答案： 正确使用IMG 使用，如果你打算让人们打印您的网页，你想被默认包含在图像。-JayTee 当图像具有重要的语义含义（例如警告图标时，请使用（带有文本）。这确保了可以
-
问题内容： 是否可以将模糊应用于HTML元素（div和img）？ 我只为iPad开发，所以跨浏览器兼容性不是问题，我可以使用HTML5 CSS3技术。 我知道如何模糊文本，但是此CSS不会模糊实际的HTML元素或其边框： 我用谷歌搜索，但是它不会模糊浏览器中的图像： 问题答案： 我今天看到了一个很酷的教程的模糊与CSS内容S，S，不透明度和颜色。
-
我想用css3过滤器模糊这个html代码的背景图像，请提供解释。 但其中的内容不会变得模糊。