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

Question

我有一个带有此 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);

Answer 1

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

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

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