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

Question

我有一个带有这个css的元素。效果很好，但我想模糊设置为覆盖的图像。我找不到只对一个背景图像应用过滤器的方法。我意识到我可能可以用::before或::after来设置它，但我真的希望有一个干净的解决方案可以让它成为css一行的一部分。我做了一些研究，但没有找到任何关于这方面的信息。现在有没有一些花哨的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