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