CSS3背景模糊实现，这就是设计想要的朦胧感

前言

前些日子小凌接到一个需求，需求是实现一个背景毛玻璃效果。

类似这样一个效果。小凌首先想到的就是CSS3提供的新特新Filter(滤镜)。但是Filter是自身滤镜，需要实现背景模糊我们需要用到这个属性backdrop-filter。

基本实现代码

首先我们需要将我们的基础页面搭建好。

html

<div class="filter-blur" >
      <div class="login-box">毛玻璃效果</div>
  </div>

css

.filter-blur{
  height: 100vh;
  background-image: url('your-pic');
  background-repeat: no-repeat;
  background-size: 100%;
.login-box{
    width: 400px;
    height: 250px;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 0 auto;
    margin-top: 200px;
  }
}

效果

接下来我们需要添加backdrop-filter 的 blur 属性。

.login-box{
  /*...ohter css */
    background-color: rgba(255, 255, 255, 0);
    backdrop-filter:blur(30px);
    box-shadow: 2px 2px 10px;
  }

便可得到我们需要的效果。

兼容性问题

backdrop-filter早年一直只被Safari支持。后来随着微软提出流畅设计体系，从Edge 17开始也支持了这个特性。

值得一提的是，在Safari和旧版Edge上启用该特性均需要加-webkit-前缀。

-webkit-backdrop-filter:blur(30px);

了解更多

更多filter属性的使用大家可以参考这篇文章：

巧用CSS filter，让你的网站更加酷炫！

项目地址:项目地址