<div>使用 css 模糊背景图像的一部分 [英] <div> blur of part of Background image with css
问题描述
我使用这个 是否有可能使用 -webkit-filter: blur();在背景图像上? 制作模糊背景图像的解决方案，效果很好！但我想在背景上制作一些
下清晰和模糊.如果我在那个 div 上移动模糊过滤器，它会变得模糊，但背景图像仍然清晰.HTML 很简单:
<div 类 = "背景"></div><div class = "content"></div>
CSS 是:
.content{宽度:70%；高度:70%；边框:2px 实心；边界半径:20px；位置:固定；顶部:15%；左:15%；z-索引:10；背景颜色:rgba(168, 235, 255, 0.2);过滤器:模糊(2px)；-webkit-过滤器:模糊(2px)；-moz-过滤器:模糊(2px)；-o-过滤器:模糊(2px)；-ms-filter:模糊(2px)；}.背景{宽度:100%；高度:100%；background-image:url('http://www.travel.com.hk/region/time_95.jpg');z-索引:0；位置:绝对；}
这是示例 http://jsfiddle.net/photolan/8gVGR/
所以我只需要使用 CSS 来模糊 content div 下的背景.
解决方案 如果它必须是动态的，你应该会遇到一些麻烦，但你可以从某个地方开始:
HTML
<div class="mask"><div class="bluredBackground"></div>
<div class="content"></div>
CSS
.content {宽度:70%；高度:70%；边框:2px 实心；边界半径:20px；位置:固定；顶部:15%；左:15%；z-索引:10；背景颜色:rgba(168, 235, 255, 0.2);}.背景 {宽度:100%；高度:100%；background-image:url('http://www.travel.com.hk/region/time_95.jpg');z-索引:2；位置:固定；}.bluredBackground {宽度:100%；高度:100%；显示:块；background-image:url('http://www.travel.com.hk/region/time_95.jpg');z-索引:1；位置:绝对；顶部:-20%；左:-20%；填充左:20％；填充顶部:20%；-webkit-过滤器:模糊(2px)；}.面具 {宽度:70%；高度:70%；边框:2px 实心；边界半径:20px；位置:固定；顶部:15%；左:15%；z-索引:10；溢出:隐藏；}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.
HTML is simple:
<body>
<div class = "background"></div>
<div class = "content"></div>
</body>
CSS is:
.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/
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;
}
这篇关于<div>使用 css 模糊背景图像的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
