＆LT; DIV＆GT;用CSS Backgroung部分图像模糊 [英] <div> blur of part of Backgroung image with css
问题描述
我用这个<一个href=\"http://stackoverflow.com/questions/13168142/is-it-possible-to-use-webkit-filter-blur-on-background-image\">Is有可能使用-webkit滤波器：模糊（）;背景图像？的解决方案，使模糊backgroung形象和它的伟大工程！但我想做出一些过度backgound并使其模糊。所以背景应该是在唯一明确的和模糊的。如果我移动模糊滤镜上该div它变得模糊，但backgound图像依然清晰。
I use this Is it possible to use -webkit-filter: blur(); on background-image? solution to make blurry backgroung image and it works great! But I want to make some over backgound and make it blurry. So background should be clear and blurry under only. If I move blur filter on that div it became blur, but backgound image still clear.
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/
所以，我需要模糊下的内容DIV的背景只能用CSS。
So I need to blur background under content div only with CSS.
推荐答案
如果它必须是动态的，你应该有一些麻烦，但你可以有地方开始与此：
If it has to be dynamic, you should have some trouble, but you can have somewhere to start with this :
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;
}
FIDDLE
这篇关于＆LT; DIV＆GT;用CSS Backgroung部分图像模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
