Html <div> 使用 css 模糊部分背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19375311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<div> blur of part of Background image with css
提问by Ruslan Abyshov
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 <div>over background and make it blurry. So background should be clear and blurry under <div>only. If I move blur filter on that div it became blur, but background image still clear.
我用这个是否可以使用 -webkit-filter: blur(); 在背景图像上？制作模糊背景图像的解决方案，效果很好！但我想制作一些<div>背景并使其模糊。所以背景应该是清晰和模糊的<div>。如果我在那个 div 上移动模糊过滤器，它会变得模糊，但背景图像仍然清晰。
HTML is simple:
HTML 很简单：
<body>
<div class = "background"></div>
<div class = "content"></div>
</body>
CSS is:
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;
}
Here is example http://jsfiddle.net/photolan/8gVGR/
这是示例http://jsfiddle.net/photolan/8gVGR/
So I need to blur background under content div only with CSS.
所以我只需要使用 CSS 模糊内容 div 下的背景。
采纳答案by EdenSource
If it has to be dynamic, you should have some trouble, but you can have somewhere to start with this :
如果它必须是动态的，您应该会遇到一些麻烦，但您可以从某个地方开始：
HTML
HTML
<div class="background"></div>
<div class="mask">
<div class="bluredBackground"></div>
</div>
<div class="content"></div>
CSS
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;
}
回答by Joke_Sense10
use -webkit-filter: blur(2px) in .backgrounddiv not in .contentdiv.
在.backgrounddiv 中使用 -webkit-filter: blur(2px) 而不是在.contentdiv 中。
Here is your updated code:
这是您更新的代码：
.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);
-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;
-webkit-filter: blur(2px);
}
