Html 我可以只在图像部分应用CSS（3）过滤器吗？

我有一个全屏背景图像

.bg { 
    left: 0;
    min-height: 100%; 
    min-width: 100%; 
    position: fixed; 
    top: 0; 
    z-index: -1; 
}

我个人想在我身体的同一位置使用模糊效果来应用CSS3过滤器

.container {
    margin: 0 auto; 
    width: 1000px;
}

下面是一个例子：

我想在模糊的容器上写文本。

CSS

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(http://lorempixel.com/420/255) no-repeat center center fixed;
    background-size: cover;
}
body:before {
    left: 0;
    right: 0;
    margin-left:auto;
    margin-right:auto;
    content: "";
    position: absolute;
    height: 100%;
    width: 500px;
    background: url(http://lorempixel.com/420/255)  no-repeat center center fixed;
    background-size: cover;
    z-index: -1;
    filter: blur(5px);
    -webkit-filter: blur(5px);
}

div {
    height: 100%;
    width: 450px;
    margin: 0 auto;
}

---

要获得模糊效果，请使用

过滤器：blur（）

（带有供应商前缀）。模糊仅适用于元素本身，而不适用于其下方的任何对象，因此您需要在“模糊框”内以及背景中参考图像，并使用

背景位置

控制偏移，以便它们正确对齐

.blur {
    background-image: url('http://placekitten.com/400/400');
    background-position: center -100px;
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
    filter: blur(10px);
}

---

您实际上可以在

选择器之前为
应用模糊，并继承
背景图像，而不是两次指定url

这使得html结构更加明显

拍摄一个div，将其放置在那里，并使用不透明度制作图像blur@Hushme不过，这不会使背景变得模糊，只是稍微褪色一点。@Hushme是的，谢谢。我已经试过了，但是你能给我举一个文本不（也）模糊的例子吗？可能重复：@DevlshOne这不是重复的。OP问的是如何模糊图像的一部分。是的！伟大的非常感谢！：）我会接受，但你能不能用这个：背景：url（“*”）无重复中心固定-webkit背景尺寸：封面-moz背景尺寸：封面-o-背景尺寸：封面；背景尺寸：封面；我不认为同样的概念适用于缩放以适应屏幕的背景图像。这和我做的很相似，但我还没有让它在不固定的bg图像大小下工作。@andi:我已经试过了，它可以工作，但我认为你工作得更好；）@MaximilianFuchs-你能发布一把它的小提琴与缩放，以适应bg图像？我想看看结果如何。我很难在中间列中缩放模糊图像来完全覆盖BG。是的，你是对的。我想我试过了；我想我在什么地方打错了。“哦，好吧！”马克西米利安福斯哈哈，你需要解释一个答案。您只添加无重复中心固定和背景大小：封面；我的回答是。这是第一次领先两三分钟。现在，我已经认出了你的帖子并接受了你的回答！：-）@MaximilianFuchs，我很感激。