CSS教程

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

效果图如下显示:

image

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

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

image

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

filter: blur(5px);

效果如下:

image

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