毛玻璃效果

毛玻璃效果就是模糊效果，关键是让谁模糊？对元素运用filter: blur(30px)会让它的子元素也变模糊，所以不能让class="content"元素模糊；

这里文本所在的区域宽高是不定的，所以没办法用一个空div做模糊效果，然后“垫”在class="content"元素下面。于是，我们想到了伪类。

将伪类的位置设置成和内容元素一样，使用负的 z-index 来把一个伪类移动到class="content"元素下层。在使用负的 z-index 来把一个子元素移动到它的父元素下层时，请务必小心：如果父元素的上级元素有背景，则该子元素将出现在它们之后。所以为class="content"元素设置z-index: 1;使伪元素出现在父父元素（class="poem"元素）之上。

# `background-attachment` 设置背景图像是否固定或者随着页面的其余部分滚动

官方地址：https://www.runoob.com/cssref/pr-background-attachment.html (opens new window)

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	背景图片不会随着页面的滚动而滚动。
local	背景图片会随着元素内容的滚动而滚动。
initial	设置该属性的默认值。
inherit	指定 background-attachment 的设置应该从父元素继承。

# `filter` 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。

官方地址：https://www.runoob.com/cssref/css3-pr-filter.html (opens new window)

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

总结

为伪元素设置和class="poem"元素一样的背景，为了让伪元素和class="poem"元素的背景重叠，用background-attachment: fixed 。此时对伪元素使用filter: blur(30px);就形成了毛玻璃效果。

编辑

#CSS动画

上次更新: 2025/04/18, 01:42:12

← css生成随机颜色冰墩墩→

毛玻璃效果

# background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动

# filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。

# `background-attachment` 设置背景图像是否固定或者随着页面的其余部分滚动

# `filter` 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。