使用CSS3快速实现毛玻璃效果

本文主要是介绍使用CSS3快速实现毛玻璃效果，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

使用CSS3实现毛玻璃效果并没有想象中那么难，我们只需要了解一个属性：

backdrop-filter: blur(5px);

在使用该属性之前我们先要区分backdrop-filter与filter的区别。

filter：模糊内容
backdrop-filter:透过该层的底部元素模糊化

因为backdrop-filter能使透过的元素模糊化，所以我们只需要在想要生成毛玻璃效果的元素上写入before伪元素，在伪元素上写入如下代码：

.home::before {
      position: absolute;
      top: 200px;
      left: 500px;
      display: block;
      height: 500px;
      width: 500px;
      content: '';
      background-color: rgba(230, 230, 230, 0.5);
      backdrop-filter: blur(5px);
    }

在此补上HTML代码片段：

<div class="home">
    <img src="./images/bg.jpg" alt="">
  </div>

效果图如下显示：

我们也可以根据需要更改毛玻璃颜色，来契合自己的主题颜色：

background-color: rgba(189, 153, 255, 0.5);

为了使毛玻璃看起来更柔和，我们可以给伪元素加上如下代码：

filter: blur(5px);

效果如下：

这篇关于使用CSS3快速实现毛玻璃效果的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！