本篇文章给人人带来的内容是关于纯CSS完成底层毛玻璃结果（代码示例），有肯定的参考价值，有须要的朋侪能够参考一下，愿望对你有所协助。
毛玻璃背景是一个很罕见的网页款式，想要完成，实在并不难，但经由我在网上的搜刮发明，大批完成要领都较为不范例，且把题目复杂化了（比方种种z-index属性和position的定位）
现供应一个代码很直白且完成结果优越的完成计划，改进自W3Schools
HTML部份
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>FrostedGlass</title>
<link rel="stylesheet" href="frostedGlass.css">
</head>
<body>
<div>
<div>
<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后，会将p从被遮挡状况“提起来”。
别的，关于差别的浏览器内核，filter的写法会有些许差别。
以上就是纯CSS完成底层毛玻璃结果（代码示例）的细致内容，更多请关注ki4网别的相干文章！
