CSS 的 backdrop-filter 能给元素背后的画面加滤镜。blur() 做模糊，brightness() 调亮度，contrast() 调对比度… · @BaiBtw · TwKit

@BaiBtw

CSS 的 backdrop-filter 能给元素背后的画面加滤镜。blur() 做模糊，brightness() 调亮度，contrast() 调对比度，也能组合使用，例如 backdrop-filter: blur(10px) brightness(0.9)。 要看见毛玻璃效果，元素本身或背景得有透明度。白色半透明背景配上模糊，就能透出经过处理的底图；背景完全不透明，效果会被挡住。 滤镜并不一定处理后方的所有内容。它只取到最近的祖先“背景根”为止：祖先设置 opacity 小于 1、filter 或 backdrop-filter 等，都可能形成这道边界。比如父元素 opacity: 0.9，子元素的模糊只能影响父子之间的背景内容，碰不到父元素后面的图。

曝光 16 · 评论 0 · 点赞 0 · 书签 0