纯CSS实现底层毛玻璃效果（代码示例）

互联网 18-11-27

本篇文章给大家带来的内容是关于纯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实现底层毛玻璃效果（代码示例）的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： html