<div> 使用 css 模糊部分背景图像
Posted
技术标签:
【中文标题】<div> 使用 css 模糊部分背景图像【英文标题】：<div> blur of part of Background image with css 【发布时间】：2013-10-22 21:48:14 【问题描述】：我使用这个Is it possible to use -webkit-filter: blur(); on background-image? 解决方案来制作模糊的背景图像，效果很好！但我想在背景上制作一些<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 下的背景。
【问题讨论】：
【参考方案1】：如果它必须是动态的，你应该会遇到一些麻烦，但你可以从某个地方开始：
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
【讨论】：
哇！效果很好！如此艰巨的任务的简单解决方案！【参考方案2】：在.background div 中使用 -webkit-filter: blur(2px) 而不是在.content div 中。
这是您的更新代码：
.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);
【讨论】：
所以你想让背景图片模糊还是内容div模糊？ 我想让.content div下的背景图片模糊。 不，不。我只想在内容 div 下使背景模糊。所以我想在背景上使用内容 div 作为玻璃效果的遮罩层。以上是关于<div> 使用 css 模糊部分背景图像的主要内容，如果未能解决你的问题，请参考以下文章