博客

css 网页实现的遮罩毛玻璃&高斯模糊效果

  • Post author:
  • Post category:其他


分析

  • 需要两张一模一样的图片，一个是模糊的，一个是不模糊的
  • 不糊的一张需要添加overflow: hidden;
  • 增加一个遮罩图，设置透明度

需要用到的css知识

  • background 设置背景
  • z-index 设置图片的层级
  • background-size 设置背景图的大小
  • filter 滤镜效果

  • overflow: hidden;超出部分隐藏实现过程


实现过程

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>毛玻璃&高斯模糊背景特效</title>

</head>

<body>

    <div class="bg"></div>
    <div class="bg2">
        <div class="bg3"></div>
    </div>
    <div class="mask">
        <p>
            有木有发现图片遮罩下面的部分是模糊的~~
        </p>
    </div>
</body>
<style>
    p {
        color: rgba(255, 255, 255, .8);
    }
    
    .bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -2;
        height: 300px;
        width: 500px;
        background: url("https://www.wuyabala.com/static/img/logo.jpg") no-repeat;
        background-size: cover;
        filter: blur(10px);
    }
    
    .bg2 {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -2;
        height: 130px;
        width: 500px;
        background-color: aqua;
        overflow: hidden;
    }
    
    .bg3 {
        height: 300px;
        width: 500px;
        background: url("https://www.wuyabala.com/static/img/logo.jpg") no-repeat;
        background-size: cover;
    }
    
    .mask {
        position: absolute;
        left: 0;
        top: 130px;
        z-index: -1;
        height: 300px;
        width: 500px;
        background: rgba(0, 0, 0, .35);
    }
</style>

</html>


版权声明：本文为ykkkkkk007原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。