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

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

发布时间:2020-10-09

浏览量: 1088

文章分类: 前端相关

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

类似QQ音乐的根据不同的歌曲，播放的背景颜色等都会变得类似，让人体验很好。

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

分析

设置网页的整体背景图

增加一个遮罩图，设置透明度

需要用到的css知识

background

设置背景

z-index

设置图片的层级

background-size

设置背景图的大小

filter

滤镜效果

实现效果

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

实现过程

直接上代码了。

毛玻璃&高斯模糊背景特效

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);

}

之前上传图片都是结合...