正在进入ing...

css 网页实现属实的遮罩毛玻璃&高斯模糊效果(QQ音乐播放效果)

发布时间:2020-10-09 浏览量: 5202 文章分类: 前端相关

大部分的网站通常都是通过设置各种颜色的背景和字体来突出内容，其实可以根据文章的类型，主题的颜色，附带的封面图等来打造体验更好的文章内容阅读体系。例如下面同样的一段内容，可以用不同的背景来提现出来，感觉就会好很多了。 类似QQ音乐的根据不同的歌曲，播放的背景颜色等都会变得类似，让人体验很好。

QQ音乐播放高斯模糊效果 QQ音乐播放毛玻璃效果

通过上面的图就可以看出来，他是通过歌曲的封面图来实现背景颜色的渐变的，但是其实也有一个问题，就是如果文字的颜色都是白色，那么肯定会出现一些图片背景色在白色字体显示不好的情况，所以还需要增加一个遮罩。

分析

  • 设置网页的整体背景图
  • 增加一个遮罩图，设置透明度

需要用到的css知识

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

实现效果

可以通过下面的图看到同样的内容，在不同的页面样式上，看起来的体验都还不错。

毛玻璃效果 高斯模糊效果

实现过程

直接上代码了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>毛玻璃&高斯模糊背景特效</title>
    <style>
        p{
            color: rgba(255,255,255,.8);
        }
        .bg{
            position: absolute;
            top: 0;
            left: 0;
            z-index: -2;
            height: 100%;
            width: 100%;
            background: url("https://www.wuyabala.com/static/img/logo.jpg") no-repeat;
            background-size: cover;
            filter: blur(100px);
        }
        .mask{
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.35);
        }
    </style>
</head>
<body>
    <p>
        之前上传图片都是结合...
    </p>
    <div class="bg"></div>
    <div class="mask"></div>
</body>
</html>