CSS: Backdrop Filter

在 CSS 中,backdrop-filter 是一个强大的属性,用于对元素背后的区域(即被该元素覆盖的下层内容)应用图形效果(如模糊、颜色偏移等),而不会影响元素自身的内容。它常被用来创建磨砂玻璃(毛玻璃)效果、背景虚化或高级视觉层次。

backdrop-filter: blur(10px);

这一行应用了两种滤镜效果到元素背后的内容:

blur(8px): 对背景内容应用8像素的模糊效果,创造出磨砂玻璃的视觉感。saturate(180%): 将背景内容的饱和度提高到原来的1.8倍,使颜色看起来更加鲜艳

backdrop-filter: blur(8px) saturate(180%);

Related posts

1 comment

Leave your comment