如果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;
}
示例工作罚款：http://jsfiddle.net/ThinkingStiff/b8fLU/(取自另一个问题)
但是,如果我想用一个绝对的div使用背景图像呢？
<div id="background"></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;
}
使用上面的设置,如何实现相同的效果(模糊但具有尖锐边缘)？
解决方法
把你的模糊元素放在一个这样的容器中：
<div class="container">
<div id="background"></div>
</div>
而不是使用高度：100％和宽度：100％使用如下：
.container{
position:relative;
width:300px; /* this is an example */
height:300px; /* this is an example */
overflow:hidden;
}
#background {
left:-15px;
right:-15px;
top:-15px;
bottom:-15px;
/* other styles */
}
您需要从元素的每一边删除15px(或更多/更少).
