php毛玻璃,纯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;

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的写法会有些许不同。