我使用这个解决方案来使背景图模糊,效果很好!但我想在背景上放一些 <div>
,并让它们变模糊。因此,只有在 <div>
下方的背景应该是清晰和模糊的。如果我将模糊滤镜移动到那个 <div>
上,它会变得模糊,但背景图仍然保持清晰。
HTML 很简单:
<body>
<div class = "background"></div>
<div class = "content"></div>
</body>
CSS 是:
.content{
width: 70%;
height: 70%;
border:2px solid;
border-radius:20px;
position: fixed;
top: 15%;
left: 15%;
z-index:10;
background-color: rgba(168, 235, 255, 0.2);
filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
}
.background{
width:100%;
height:100%;
background-image:url('http://www.travel.com.hk/region/time_95.jpg');
z-index:0;
position:absolute;
}
这里有一个例子 http://jsfiddle.net/photolan/8gVGR/
所以我需要使用CSS仅模糊内容div下的背景。