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

  }

}

巴特西

用CSS伪类实现毛玻璃效果

最新文章

热门文章