Question

我有一个全屏幕背景图片

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

并且想要应用CSS3过滤器，个人我想使用模糊效果，与我的身体处于同一位置

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

以下是一个例子：

screenshot http://imageshack.us/a/img443/4976/j7qj.jpg

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

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

Answer 2

要获得模糊效果，请使用filter: blur()（包含供应商前缀）。模糊仅适用于元素本身，而不适用于其下方的任何内容，因此您需要在＆＃34;模糊框中引用图像。以及在后台，并使用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

Answer 3

您实际上可以为before选择器应用模糊并继承background-image，而不是指定两次网址。

这使得html结构更加明显

JSFiddle Demo

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

3 个答案: