CSS样式

/* 设置背景颜色 */
background-color: rgba(255, 255, 255, 0.89);
/* 应用backdrop-filter属性来创建毛玻璃效果 */
backdrop-filter: brightness(200%) saturate(150%) blur(6px);

brightness(200%):【亮度】这个函数将背景的亮度增加到原来的200%,即亮度翻倍。如果值超过100%,背景会变得更亮,低于100%会变暗。

saturate(150%):【饱和度】这个函数将背景的饱和度增加到原来的150%,即饱和度增加50%。如果值超过100%,背景会变得更鲜艳,低于100%会变褪色。

blur(6px):【模糊】这个函数给背景添加一个模糊效果,模糊半径为6像素。数值越大越模糊。模糊效果会使背景变得不那么清晰,产生一种朦胧感。

效果如图,我设置的不是很透,效果可以自定义。

下面是我自己的设定

border-radius: 10px;
border: 1px solid #ffffff9d;
/* 设置背景颜色 */
background-color: rgba(0, 0, 0, 0.20);
/* 应用backdrop-filter属性来创建毛玻璃效果 */
backdrop-filter: brightness(200%) saturate(60%) blur(30px);

加入了border: 1px solid #ffffff9d;,是为了让效果看起来更像毛玻璃。

6645f64d3e500.webp