用css写背景模糊的三种情况

本文介绍: 今天一下午什么都没干，只搞了这个模糊效果和动画还有一个发光按钮的效果，不过当真正攻克难关的时候还是感觉很开心的，一定一定要把基础知识掌握牢固（比如 overflow和after的两个引号），其实最难的往往还是最基础的知识，因为东西就这么多，就摆在这里，再多的花样也逃不出这些基础知识的范围，花活谁都会整，有基本才是硬道理。关关难过关关过，前路漫漫亦灿灿嘛。

1.背景 模糊

这种最简单也是最直接的，这里展示两种背景模糊的写法：

1.用back drop–filter 的一个子属性 blur进行设置模糊（这里的值代表的是将n✖n 方格里面的像素的颜色做加权平均，即高斯模糊。

2.用filter 直接进行设置模糊。

这里需要注意的是，filter 会直接影响元素的内容，而 backdrop-filter 作用于元素的背景。通常情况下，使用 backdrop-filter 会使整个元素的外观更加柔和，而 filter 则会更改元素内部的外观，其中一些可能会影响文本或者其他重要信息的清晰度。

需要注意的是，由于 backdrop-filter 是 CSS3 中的一项新功能，目前仅有部分浏览器支持该特性，并且在性能方面也不是特别出色，开发者在使用时需要权衡好各种因素。

我试过使用 backdrop-filter 做背景效果的时候可以正常使用 border之类的效果，但是换成fi lte r之后该效果就消失了，还有要注意如果是子类或者父类的伪类使用 fi lter进行模糊的话要继承父类的背景，也就是使用 background:in heri t，否则会没有模糊效果，再有就是如果在父类直接调用 backdrop-filter 的话可能会没有效果（Edg el 浏览器）。

代码：

//1.直接使用backdrop-filter进行模糊

backdrop-filter: blur(3px);

//2。先设置background再设置filter进行模糊

 background: url("MovingHeart.gif");
 filter: blur(3px);

2.背景清晰局部模糊

其实就是一个很简单的一个 div 里面嵌套一个 div，设置好z-index让正确的图层摆在正确的位置，这里我有参考其他博主的做法。

代码：

.local-blur{
    position: relative;
    width: 500px;
    height: 500px;
}
.local-blur2{
    position: absolute;
    width: 200px;
    height: 200px;
    overflow: hidden;
    
    top: 150px;
    left: 180px; 
    filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow:  0 0 10px 6px rgba(0, 0, 0, 0.678);
    /* z-index: 1; */
}
.local-blur2 img{
    position:absolute;
    top:-150px; 
    left:-180px;
}
//这里用了一点点技巧，让子元素利用top和left对应到父类img的某个位置，然后让子类的img反向偏移相同的距离，从而实现与父类的图像对齐的目的

3. 背景模糊局部清晰

这里就是难点了（本竹子用了一下午才参透其中奥妙，还请教了老师，汗颜），这里我主要介绍两种方法，主要难点就是只要父类的filter设置了模糊，就会覆盖子类从而导致不能实现子类的清晰效果，解决方法就是使用伪类（这里一定要注意使用伪类 after的时候一定是两个引号！！！，竹子被老师狠狠批评了（哭）），只改变父类而不影响子类。还要注意的就是伪类里面一些东西不能省略，是必须要写的。

1.就是老师的代码，也就是现在常规的正规的调用方法，就是在css的类里面直接添加 background 写url进行调用，然后伪类写模糊（这里注意看我在第一个板块里面介绍的两个设置模糊内容的注意事项），最后是要注意background的定位的不同显示效果，比如 fixed就没有办法随着鼠标的滚动进行移动。

2.就是我本人写的代码，和第二个板块很类似，就是直接对这个类下面的im g进行操作，就是将父类的im g 设置成模糊，然后能不影响子类的img，用子类的img做一个清晰的效果

这里呢说明一下第二种方法直接操作img元素会影响其他元素的显示效果，比如加文字的时候会被同一个图层里面的img 覆盖掉，解决方法就是再次调图层，这里说这个主要是想告诉读者朋友使用第一种方法是直接操作背景，对显示内容不会有影响，比较方便（果然老师还得是老师）。

代码：

//1.老师的代码（对类的背景进行操作
）
  /*背景局部清晰*/
.local-blur{
    width: 500px;
    height: 500px;
    position: relative;
    background: url("flower.jpg") no-repeat center;
}

/* 伪元素 after 有两个冒号， ::after */
.local-blur::after{
    /* 为元素必须写一个 content，里面放个空格也行 */
    content: " ";
    display: block;

    /* 这里借助绝对定位，拉扯这个元素，实现变相设置元素大小 */
    position: absolute;
    left: 10%;
    top: 10%;
    right: 10%;
    bottom: 10%;
        background: inherit;
    /* 设置模糊，不用 filter */
    /* backdrop-filter: blur(5px); */
    filter: blur(5px);
    /* background-color: rgba(128, 255, 0, 0.404); */

    /* 需要设置 ::after 的叠放层级，否则它将在 local-blur 的下方 */
    z-index: 1;

    border: 1px solid black;
    box-shadow: 0px 0px 3px darkgray;
}

/* 实际显示内容的元素 */
.content {
    /* 需要给一个明确的大小 */
    font-size: 36px;
    width: 50%;
    height: 60%;
    text-align: center;
    background: inherit;
    /* 用绝对定位做居中 */
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    margin: auto;

    /* 调整叠放次序，让它高于 ::after 元素，否则会被模糊 */
    z-index: 2;
}
2.我的代码（直接操作类下面的元素）
.local-blur{
    width:500px;
    height:500px;
    position: relative;
    /* background: url("flower.jpg") no-repeat fixed; */
    padding:1px;
   
   
}
.local-blur::after{
    content: " ";
    position: absolute;
    left:10%;
    top:10%;
    right: 10%;
    bottom:10%;
    backdrop-filter: blur(3px);
    box-shadow:  0 0 10px 6px rgba(0, 0, 0, 0.425);
}
.local-blur2{
    
    position: absolute;
    left:150px;
    top:150px;
    
    width:180px;
    height:180px;
    overflow: hidden;
    z-index:1;
}
.local-blur2 img{
    position: absolute;
    left:-150px;
    top:-150px;
    z-index:2;
    border: 1px solid black;
    box-shadow:  0 0 10px 6px rgba(0, 0, 0, 0.493);
}
.local-blur2 p{
    position: absolute;
    left:10%;
    top:10%;
    right: 10%;
    bottom:10%;
    font-size: 36px;
    color: rgba(28, 9, 3, 0.834);
    z-index:3; 
    /* border: 1px solid black; */
}

总结：

今天一下午什么都没干，只搞了这个模糊效果和动画还有一个发光按钮的效果，不过当真正攻克难关的时候还是感觉很开心的，一定一定要把基础知识掌握牢固（比如 overflow和after的两个引号），其实最难的往往还是最基础的知识，因为东西就这么多，就摆在这里，再多的花样也逃不出这些基础知识的范围，花活谁都会整，有基本才是硬道理。关关难过关关过，前路漫漫亦灿灿嘛。