CSS 毛玻璃效果实现:使用 backdrop-filter 属性
可以使用 CSS 中的'backdrop-filter'属性来实现毛玻璃效果。具体实现步骤如下:
-
将'background'属性设置为透明色,以便毛玻璃效果能够展现出来。
-
设置'backdrop-filter'属性为'blur(模糊值)',可以控制毛玻璃的程度。
-
为了兼容性,可以添加'-webkit-'前缀。
示例代码:
.card {
background: transparent;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* 兼容性 */
}
原文地址: https://www.cveoy.top/t/topic/knoC 著作权归作者所有。请勿转载和采集!