我可以只对图像部分应用CSS(3)过滤器吗?

时间:2013-08-13 16:01:39

标签: html css css3 blur svg-filters

我有一个全屏幕背景图片

.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

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

3 个答案:

答案 0 :(得分:6)

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

答案 1 :(得分:3)

要获得模糊效果,请使用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

答案 2 :(得分:2)

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

这使得html结构更加明显

JSFiddle Demo