实现思路

具体效果展示可见红框框起来的部分

mbl_1.png

实现该效果的方法有多种多样，但最泛用的都是利用伪元素的滤镜效果实现：

    filter: blur();

利用blur属性可以直接让元素呈高丝模糊状态：

wlop大佬的原图：
mbl_2.jpg

添加了blur属性后：
mlb_3.jpg

我们可以看到元素确实是呈高丝模糊状态了，但是边缘羽化过于严重，而且我们会发现blur把连同在内的文字全部模糊了：
mlb_4.jpg

要解决这两个问题我们就需要给伪元素设置这两个样式：

    z-index:-z;
//让文字覆盖伪元素

和

    margin:-30px;
//这里的值只要是负的就行，会帮忙解决羽化问题

接着为了不让羽化范围溢出边界所以我们要给元素本身添上

    overflow: hidden;

这个样式。

整体效果

mbl_5.jpg

整体代码

    body{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    main{
      width: 70%;
      height: 500px;
    }
    body,main::before{
    background: url("背景图片路径.jpg") 0 / cover fixed;      
    }
    main{ 
      position: relative;
      background: hska(0,0%,100%,.3);
      overflow: hidden;  
      padding: 20px; 
    }

    main::before{      
      position: absolute;
      top:0;
      right:0;bottom:0;left:0;
      filter: blur(20px);
      margin:-30px;     
      z-index: -1; 
    }

参考资料

CSS技巧收集——毛玻璃效果
张鑫旭大佬写的

Last modification：November 8th, 2019 at 12:15 pm
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏