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