问题
使用css模糊部分Backgroung图像

我用这个是否可以使用-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下的背景。

9632

2017-10-15 07:16

起源

答案:

如果它必须是动态的，你应该有一些麻烦，但你可以从这里开始：

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;
}

小提琴

2017-10-15 13:22

哇！效果很好！这样艰巨任务的简单解决方案！ - Ruslan Abyshov

具有水平模糊和不透明度的版本， jsfiddle.net/sE4Fv/677 - Antoine F.

答案:

如果它必须是动态的，你应该有一些麻烦，但你可以从这里开始：

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;
}

小提琴

2017-10-15 13:22

哇！效果很好！这样艰巨任务的简单解决方案！ - Ruslan Abyshov

具有水平模糊和不透明度的版本， jsfiddle.net/sE4Fv/677 - Antoine F.

使用-webkit-filter：blur（2px）in .background div不在 .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);
}

2017-10-15 07:26

不起作用。只有内容div变得更加透明。 - Ruslan Abyshov

所以你想让背景图像模糊或内容div模糊？ - Joke_Sense10

我想在.content div下使背景图像模糊。 - Ruslan Abyshov

检查我的更新代码。 - Joke_Sense10

不，不。我想在内容div下使背景模糊。所以我想使用内容div作为背景的玻璃效果的遮罩层。 - Ruslan Abyshov

问题 使用css模糊部分Backgroung图像

答案:

答案:

热门问题

问题
使用css模糊部分Backgroung图像