htmlcss部分背景模糊效果,CSS3实现模糊背景的三种效果⽰
例
不开头了，直接进⼊主题。
普通背景模糊效果如下：
使⽤属性：
filter:(2px)
普通背景模糊
为了美观不能使背景前的⽂字模糊，⽽filter属性会使这整个div的后代并且还会出现⽩边。也就是说⽆法达到这个效果。怎么办呢？我们可以使⽤伪元素，这样我们也顺便解决了⽩边的问题。
实现思路：
在⽗容器中设置背景，并且使⽤相对定位，⽅便伪元素重叠。⽽在:after中只需要继承背景，并且设置模糊，绝对定位覆盖⽗元素即可。这样⽗容器中的⼦元素便可不受模糊度影响。因为伪元素的模糊度不能被⽗元素的⼦代继承。
说了这么多，来点代码提提神。
简单的html布局：
like window
css：
/
*背景模糊*/
.bg{
width:100%;
height:100%;
position: relative;
background: url("../image/banner/banner.jpg") no-repeat fixed;
padding:1px;
box-sizing:border-box;
z-index:1;
}
.bg:after{
content: "";
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
background: inherit;
filter: blur(2px);
z-index: 2;
}
.drag{
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
width:200px;
height:200px;
text-align: center;
z-index:11;
}
当然，看了上⾯的代码就能发现⽗容器下⾯的⼦代元素也是要使⽤绝对定位的，但是这个不会影响到后⾯的布局的，所以请放⼼使⽤(有问题可以博主⿇烦~)。要注意的地⽅是要使⽤z-index确定层级关系，必须确保⼦代元素(也就是这⾥的drag)是在最上层的。不然⼦代元素的⽂字是不会出现的。
上⾯的代码还有⼀个保证div居中的⽅法，细⼼的同学应该已经注意到了吧！不使⽤flex布局的情况下这样居中应该是⽐较简单的⽅法了。
那么这样写代码表现出来的效果是怎么样的呢？
背景局部模糊
相⽐较上⼀个效果⽽⾔，背景局部模糊就⽐较简单了。这时⽗元素根本就不⽤设置伪元素为模糊了。
直接类⽐上⾯的代码把⼦元素模糊掉，但是⼦元素的后代可能不能模糊了(这点要注意，解决办法就是上⼀个效果的描述那样)。
HTML布局稍微变了⼀下：
like window
css代码如下：(⼤家注意对⽐)
/*背景局部模糊*/
.bg{
width:100%;
height:100%;
background: url("../image/banner/banner.jpg") no-repeat fixed;
padding:1px;
box-sizing:border-box;
z-index:1;
}
.drag{
margin:100px auto;
width:200px;
height:200px;
background: inherit;
position: relative;
}
.drag >div{
width:100%;
height: 100%;
box sizing
text-align: center;
line-height:200px;
position: absolute;
left:0;
top:0;
z-index: 11;
}
.drag:after{
content: "";
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
background: inherit;
filter: blur(15px);/*为了模糊更明显，调⾼模糊度*/
z-index: 2;
}
效果如下：
背景局部清晰
背景局部清晰这个效果说简单也不简单，说难也不难。关键还是要应⽤好background:inherit属性。这⾥可不能使⽤transform让它垂直居中了，⼤家还是选择flex布局吧。如果这⾥再使⽤transform属性的话会让背景也偏移的。这样就没有局部清晰的效果了。
html布局不变，
注意看css的变化：
/*背景局部清晰*/
.bg{
width:100%;
height:100%;
position: relative;
background: url("../image/banner/banner.jpg") no-repeat fixed; padding:1px;
box-sizing:border-box;
}
.bg:after{
content: "";
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
background: inherit;
filter: blur(3px);
z-index: 1;
}
.drag{
position: absolute;
left:40%;
top:30%;
/*transform: translate(-50%,-50%);*/
width:200px;
height:200px;
text-align: center;
background: inherit;
z-index:11;
box-shadow: 0 0 10px 6px rgba(0,0,0,.5);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。