我有一个全屏背景图像
.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
我想在模糊的容器上写文字.
解决方法
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;
}
