我能否仅在图像部分应用CSS滤镜？

Question

我有一张全屏背景图片

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

我想应用CSS滤镜，个人喜欢使用模糊效果，位置与我的主体相同

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

这是一个例子:

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

- Maximilian Fuchs

---

取一个 div，将其定位到那里，并使用不透明度使图像模糊。 - Hushme

@DevlshOne 这不是重复的问题。原帖询问如何模糊图像的某个部分。 - Asad Saeeduddin

你能够将三张独立的图片并排使用吗？ - Asad Saeeduddin

@Asad：嗯...这样会行吗？ - Maximilian Fuchs

问题：您的背景图像是否按比例缩放以适应屏幕，还是显示原始大小的大型背景图像？ - andi

Answer 1

http://jsfiddle.net/QvSng/6/

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;
}

- daniel__

---

@MaximilianFuchs 哈哈，你需要解释一下答案。你只是在我的答案中添加了no-repeat center center fixed和background-size: cover;。那是前两三分钟的事情了。http://jsfiddle.net/QvSng/6/ - daniel__

Answer 2

为了获得模糊效果，请使用filter: blur()（加上厂商前缀）。模糊仅适用于元素本身，而不适用于其下面的任何内容，因此您需要在“模糊框”内引用图像以及在背景中使用background-position来控制偏移量，以便它们正确对齐。

.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);
}

JSFiddle Demo

- CheeseWarlock

---

太棒了！非常感谢！:) 我会接受的，但是你能否使用这个：background: url("*") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; - Maximilian Fuchs

我不认为相同的概念适用于被缩放以适应屏幕的背景图片。这与我所做的类似，但我还没有使非固定背景图片大小的效果实现。 - andi

@andi：我已经尝试过了，它可以工作，但我认为你做得更好 ;) - Maximilian Fuchs

@MaximilianFuchs - 你能发布一个fiddle，展示一下缩放到适合背景图像的工作原理吗？我想看看最终效果如何。我在尝试将中间列中的模糊图像按比例缩放以完全覆盖背景时遇到了问题。 - andi

是的，你说得对。我以为我试过了那个方法，可能是我哪里打错了字。嗯，算了吧。 - andi

Answer 3

你可以在 before 选择器中应用模糊效果，并继承 background-image 而不是重复指定 url。这使得 HTML 结构更加明显。 JSFiddle 演示

- Srinivasan

---

我很想用普通的img元素来实现这个，但这是一个很好的解决方案。 - Reahreic