这篇文章给大家分享的是有关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://cache.yisu.com/upload/information/20200318/93/11353.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实现底层毛玻璃效果的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
