CSS 在具有多个背景图像的元素上过滤一个背景图像

标签 css css-filters

我有一个带有此 CSS 的元素。效果很好,但我想模糊设置为覆盖的图像。我找不到将滤镜仅应用于一个背景图像的方法。我意识到我可能可以用 ::before::after 来设置它,但我真的希望有一个干净的解决方案让它成为 css one 的一部分-类轮在这里。我做了一些研究,但没有找到有关此的任何信息。现在有一些奇特的 css 魔法可以做到这一点吗?

background: url($img) center/contain no-repeat, url($img) center/cover;

我希望能够做这样的事情:

background: url($img) center/contain no-repeat, url($img) center/cover blur(20px);

最佳答案

您可以使用 filter() 像下面这样完成您想要的操作

background: 
  url($img) center/contain no-repeat,
  filter(url($img), blur(20px)) center/cover;

但是现在还没有浏览器支持:https://caniuse.com/css-filter-function

关于CSS 在具有多个背景图像的元素上过滤一个背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73872944/

相关文章:

css - Firefox 上具有变换 3D 和滤镜模糊的背景中心

html - 向另一个 SVG 图像内的 SVG 图像添加滤镜

javascript - jquery 单击单选按钮和边框 TD

javascript - Bootstrap 文本框 Dropbox 搜索

javascript - 带有 stylesheet_link_tag 的 HTML1506 : Unexpected token,

javascript - 位置 :relative moving image to foreground

html - css body filter invert不适用于伪选择器

css - 如何将悬停效果定向到过滤器?

html - Chrome 图像无法呈现

html - CSS关键帧动画