用CSS伪类实现毛玻璃效果

效果图：

 

思路:

　　内容容器须要一个before伪类，负责引用跟背景容器相同的背景图，还须要一个after伪类，用来加上半透明的白色背景。这两个伪类的层级需都为-1，而内容容器自己的层级为1，这样作能够使内容在毛玻璃上层。而之因此不把背景图和背景颜色都写在一个伪类中是由于咱们只须要对图片作模糊处理，而半透明的after伪类扮演的是一个遮罩层的角色。在负责背景图的伪类中，background-position与背景容器的background-position应相同，且背景图伪类的background-attachment应设为fixed，用于适应拼接大背景图。

 

完整代码：

　　

html:

　　

    <section class="banner">
      <div class="nav-bg">
        <ul class="nav-con">
          <li>主站</li>
          <li>音频</li>
          <li>游戏中心</li>
          <li>直播</li>
        </ul>
      </div>
    </section>

　　

less:

// 背景容器
.banner {
  height: 170px;
  background: url(../../public/banner-bg.png) no-repeat -35px -10px;
  overflow: hidden;

　// 内容容器
  .nav-bg {
    z-index: 1;
    position: relative;
    width: 700px;
    height: 100px;
    margin: 30px;
    overflow: hidden;
  }

  .nav-bg::before {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: url(../../public/banner-bg.png) no-repeat -35px -10px fixed;
    filter: blur(2px);
  }

  .nav-bg::after {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-color: rgba(255, 255, 255, 0.4);
  }

　// 内容
  .nav-con {
    width: 300px;
    height: 42px;
    margin: 20px auto;
    list-style: none;
  }

  .nav-con li {
    float: left;
    margin-right: 10px;
  }
}