css 网页实现属实的遮罩毛玻璃&高斯模糊效果(QQ音乐播放效果)
发布时间:2020-10-09
浏览量: 5202
文章分类: 前端相关
大部分的网站通常都是通过设置各种颜色的背景和字体来突出内容,其实可以根据文章的类型,主题的颜色,附带的封面图等来打造体验更好的文章内容阅读体系。例如下面同样的一段内容,可以用不同的背景来提现出来,感觉就会好很多了。 类似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>