如果img未设置为绝对值,这可以正常工作:
div img {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
margin: -5px -10px -10px -5px;
}
div {
margin: 20px;
overflow: hidden;
}
但是,如果我想用一个绝对的div使用背景图像呢?
#background {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
filter: blur(5px) brightness(0.75);
-webkit-filter: blur(5px) brightness(0.75);
-moz-filter: blur(5px) brightness(0.75);
-ms-filter: blur(5px) brightness(0.75);
-o-filter: blur(5px) brightness(0.75);
position: absolute;
background-image: url('images/bg.png');
z-index: 1;
}
使用上面的设置,如何实现相同的效果(模糊但具有尖锐边缘)?