Html CSS-在背景大小级别而不是容器级别模糊背景

我想把背景弄模糊。但是我不希望模糊应用于

标题

，而是希望在每个重复的

图像

可能吗

.header{
宽度：100%；
填充顶部：40px；
最小高度：135px；
垫底：0px；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
}
.标题：之前{
内容：“；
位置：固定；
左：0；
右：0；
z指数：-1；
背景图像：url（'https://graph.facebook.com/311194819319371/picture?type=small');
宽度：500px；
高度：200px；
-webkit过滤器：模糊（5px）；
保证金：自动；
}
.header>img{
最大宽度：300px；
最大高度：150像素；
}

---

使用

背景大小

可以控制大小，如果要重复，可以使用

背景重复

为了使

模糊

不影响

标题

本身，pseudo必须位于顶部，而不是现在的下方，使用

z-index:-1

，因此我删除了

z-index

由于pseudo有一个位置，而不是

static

，因此也必须有

头的任何其他子元素，否则它们将在它下面结束，所以这里我也给出了
img
位置：relative

.header{
位置：相对位置；
宽度：100%；
填充顶部：40px；
最小高度：200px；
/*在这里也添加了图像，因此可以看到它不模糊*/
背景图像：url（'https://graph.facebook.com/311194819319371/picture?type=small');
垫底：0px；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
}
.header：：之前{
内容：“；
位置：绝对位置；
左：10%；
排名前10%；
背景图像：url（'https://graph.facebook.com/311194819319371/picture?type=small');
背景尺寸：自动60px；
背景重复：重复；
宽度：80%；
身高：80%；
-webkit过滤器：模糊（5px）；
}
.header>img{
位置：相对位置；
最大宽度：300px；
最大高度：150像素；
}
.header.nr2{
边缘顶部：20px；
}
.header.nr2:：之前{
背景尺寸：封面；
背景重复：无重复；
}

---

您想要的效果在技术上是可能的，但代码不会很漂亮。您可以添加一个带有负z索引的

位置：绝对
div，并根据需要添加任意数量的单独模糊图像


.header{
宽度：100%；
填充顶部：40px；
最小高度：135px；
垫底：0px；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
位置：相对位置；
}
.bg图片{
-webkit过滤器：模糊（5px）；
}
.bg pics容器{
位置：绝对位置；
z指数：-1；
宽度：500px；
高度：200px；
}
.header>img{
最大宽度：300px；
最大高度：150像素；
}

根据两个给定的答案，这可以用多种方式进行解释，因此您可以显示预期输出的图形，并解释重复图像的含义。我添加了两张图片。第二个是
中间渲染
。第一个是我想要的
最终渲染。重要的是我想避免手动乘以img。更新了我的答案。请对其进行评论，以澄清缺失的内容或需要调整的内容。我想要两个版本的混合。如果你看我上传的第二张照片。
模糊
应用于每个较小的背景图像。在您的第一个示例中，图像重复，但模糊应用于容器
标题
@Leo Updated…也将图像添加到标题，以便您看到它不模糊…这是您想要的吗？如果是，我将解释我想要的did@Leo谢谢…用解释更新了我的答案