Can I apply CSS(3) filters ONLY on image sections?

问题:

I have a full screen background image

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

and want to apply a CSS3 filter, personally I would like to use a blur effect, at the same position as my body

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

Here's an example:

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

I want to write text over the blurred container.

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

回答2:

To get the blur effect, use filter: blur() (with vendor prefixes). The blur applies only to the element itself, not to anything underneath it, so you'll need to reference the image within the "blur box" as well as in the background, and use background-position to control the offset so that they line up properly.

.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

回答3:

You can actually apply blur for the before selector and inherit background-image instead of specifying url twice.

That makes the html structure more evident

JSFiddle Demo