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

本篇文章给大家带来的内容是关于纯CSS实现底层毛玻璃效果(代码示例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

毛玻璃背景是一个很常见的网页样式，想要实现，其实并不难，但经过我在网上的搜索发现，大量实现方法都较为不规范，且把问题复杂化了(例如各种z-index属性和position的定位)

现提供一个代码很直白且实现效果良好的实现方案，改良自W3Schools

HTML部分

FrostedGlass

this is FrostedGlass

.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;

<