开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情

在写文章之前，我们先来了解一下什么是毛玻璃，对出现在元素其后的背景进行模糊与半透明处理，被称作毛玻璃效果。毛玻璃的效果在现在很多场景中都使用过,比如像 mac电脑的程序坞、在个人网站的登录框也比倾向于使用毛玻璃.我们在这里使用两种方式来实现毛玻璃的效果.

filter的方式

filter是css的属性.它的作用就是将模糊或颜色偏移等图形效果应用在元素上.

blur()

blur()函数将高斯模糊应用于输入图像. 如:

filter:blur(5px)

但这种得到的并不是毛玻璃效果,我们需要在外面再套一层元素并对齐进行 overflow:hidden,里面元素再进行高斯模糊.

//html代码
<div class="backdrop-filter" draggable="true">
<div class="filter"></div>
</div>

//css代码
.filter{
  width: 200px;
  height: 200px;
  filter: blur(20px);
    background-color: rgba(255,255,255,0.8);
    /* margin: -100px; */
background: url('https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg') no-repeat;
  background-size: 100%;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
  background: url('https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg') no-repeat;
  background-size: 100%;
}
.backdrop-filter{
  width: 200px;
  height: 200px;
  overflow: hidden;
}

得到的结果如下:

可以看到周围的效果减弱了,所以我们要将里面这层元素的高宽度变大:

.filter{
  width: 400px;
  height: 400px;
  filter: blur(20px);
    background-color: rgba(255,255,255,0.8);
     margin: -100px;
background: url('https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg') no-repeat;
  background-size: 100%;
}

backdrop-filter

这个 css属性会将元素后面的区域加上一个图形效果(模糊或者偏移).这个才是做毛玻璃的不二之选. 就刚才的例子而言:

.filter{
  width: 400px;
  height: 400px;
  /* filter: blur(20px); */
  backdrop-filter: blur(20px);
    background-color: rgba(255,255,255,0.8);
  opacity: 0.8;
  background-size: 100%;
}

切记要加上透明度,原因就是它仅仅是对元素后面的区域进行模糊并不会对自身进行模糊.

css实现毛玻璃效果

filter的方式

blur()

backdrop-filter