Rus*_*hov 12 html css background blur filter
我用这个是否可以使用-webkit-filter:blur(); 在背景图像？解决方案,使模糊的背景图像,它的效果很好!但我想在背景上做一些让它变得模糊.因此,背景应该是清晰和模糊的.如果我在该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下的背景.
Ede*_*rce 12
如果它必须是动态的,你应该遇到一些麻烦,但是你可以从某个地方开始:
HTML
<div class="background"></div>
<div class="mask">
<div class="bluredBackground"></div>
</div>
<div class="content"></div>
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);
}
.background {
width:100%;
height:100%;
background-image:url('http://www.travel.com.hk/region/time_95.jpg');
z-index:2;
position:fixed;
}
.bluredBackground {
width:100%;
height:100%;
display:block;
background-image:url('http://www.travel.com.hk/region/time_95.jpg');
z-index:1;
position:absolute;
top:-20%;
left:-20%;
padding-left:20%;
padding-top:20%;
-webkit-filter: blur(2px);
}
.mask {
width: 70%;
height: 70%;
border:2px solid;
border-radius:20px;
position: fixed;
top: 15%;
left: 15%;
z-index:10;
overflow:hidden;
}