Css 如何在背景模糊的情况下创建适合高度的背景图像

是否有任何方法可以使用CSS创建适合高度的

背景图像

，背景模糊？如果有必要（但不想），我会使用js

示例：

---

您可以通过多种方式制作，但它始终需要两个图像：一个在它后面模糊，另一个在上面

仅使用CSS（背景图像）的解决方案，基于前/后的伪类：

.container{
宽度：500px；
高度：250px；
位置：相对位置；
溢出：隐藏；
}
.货柜：在，
.货柜：之后{
内容：“；
位置：绝对位置；
宽度：100%；
身高：100%；
背景：url(https://peach.blender.org/wp-content/uploads/poster_bunny_small.jpg);
背景重复：无重复；
背景位置：中心；
背景尺寸：包含；
}
.货柜：在{
背景尺寸：封面；
过滤器：模糊（10px）；
转换：比例（1.1）；
}

---

是的，当然！到目前为止，你尝试了什么？失败在哪里？如果您还没有，请确保检查

对象拟合

属性和

过滤器

属性的

blur（）

函数。@agrm

对象拟合

用于

和

不是吗？我正在使用一个带有背景图像的

。哇，当我看到你的答案时，我正在用背景图像和

做一个答案。关于伪元素的思考做得很好@Vepthy解决方案仍然值得考虑，所以我添加了这个更像：）！很好。另外，第一个选项是使用伪元素，而不是classesNice元素。只想添加一个属性，虽然Firefox仍然不支持它