如何在一个具有多个背景图片的元素上，为其中一张背景图片应用CSS滤镜？

Question

如何在一个具有多个背景图片的元素上，为其中一张背景图片应用CSS滤镜？

3

我有一个使用这个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);

- Barry

1

在遥远的未来，你将能够做出这样的魔法，但现在你唯一的解决方案是伪元素。 - Temani Afif

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

您可以像下面这样使用filter()来实现您想要的效果。

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

但目前没有浏览器支持这个功能：https://caniuse.com/css-filter-function