实现一个成熟的底层毛玻璃效果（纯CSS）
hjfbluesky 2019-06-29
写在前面
毛玻璃背景是一个很常见的网页样式，但大量实现方法都把问题复杂化了
现提供一个代码很直白且实现效果良好的实现方案，改良自W3Schools
HTML部分
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>FrostedGlass</title>
<link rel="stylesheet" href="frostedGlass.css">
</head>
<body>
<div class="mainHolder">
<div class="textHolder">
<p>this is FrostedGlass</p>
</div>
</div>
</body>
</html>.mainHolder是主框体
.textHolder是毛玻璃区域
.p是浮于毛玻璃上的文字内容
CSS部分
* {
box-sizing: border-box;
}
.mainHolder {
width: 600px;
height: 600px;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
.textHolder {
width: 100%;
height: 200px;
position: absolute;
right: 0;
bottom: 0;
background: inherit;
overflow: hidden;
}
.textHolder::before {
content: '';
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
background: inherit;
background-attachment: fixed;
filter: blur(4px);
}
.textHolder::after {
content: "";
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.25);
}
p {
z-index: 1;
color: white;
position: relative;
margin: 0;
}解决毛玻璃效果里最核心的问题：模糊效果不能影响字体，采用了伪元素::after和::before
值得注意的是，在p标签里的position属性。设置为relative后，z-index会生效，将p从被遮挡状态“提起来”。
另外，对于不同的浏览器内核，filter的写法会有些许不同。
相关推荐
80216239 0喜欢 / 0评论 2017-05-06
82216834 0喜欢 / 0评论 2017-04-22
linyuan 0喜欢 / 0评论 2017-04-18
82296134 0喜欢 / 0评论 2017-04-17
88226532 0喜欢 / 0评论 2017-04-04
JoeQiang 0喜欢 / 0评论 2017-02-03
83286033 0喜欢 / 0评论 2017-01-05
86296634 0喜欢 / 0评论 2016-05-09
ForthPerson 0喜欢 / 0评论 2016-03-30
81266234 0喜欢 / 0评论 2016-01-03
86206530 0喜欢 / 0评论 2015-12-26
liangston 0喜欢 / 0评论 2015-08-17
技术日志 0喜欢 / 0评论 2015-08-16
WindowsTao 0喜欢 / 0评论 2015-05-04
86246039 0喜欢 / 0评论 2015-04-29
faintbook 0喜欢 / 0评论 2015-04-29
zhoubaiwen 0喜欢 / 0评论 2015-04-28
royrui 0喜欢 / 0评论 2015-04-27
zhouboxiao 0喜欢 / 0评论 2014-12-16
muyangzhe 0喜欢 / 0评论 2014-12-15
ddzhouqian 0喜欢 / 0评论 2014-11-15
闪饕 0喜欢 / 0评论 2014-11-15
梦想软件设计师 0喜欢 / 0评论 2014-10-08
易分享 0喜欢 / 0评论 2017-04-05
83367767 0喜欢 / 0评论 2019-06-21
数据人生 0喜欢 / 0评论 2010-01-21