CSS简易毛玻璃效果

CSS简易毛玻璃效果

oo小陈同学

2021年06月30日 14:35 ·  阅读 5199

CSS 毛玻璃效果

一、什么是毛玻璃效果？

• 背景模糊的磨砂玻璃效果

• 空间物体漂浮多层次

• 鲜艳的色彩突出模糊的透明度

• 半透明物体上有一个细微的光线边界

二、如何实现？

.example{
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 25px;
    box-shadow:inset 0 0 6px rgba(255, 255, 255, 0.2);
}
复制代码

三、兼容问题？

1、如果只是简单的背景，可以使用 background-attachment: fixed 配合 filter: blur() 进行模拟；

2、对于fireFox浏览器，可以使用 moz-element() 配合 filter: blur() 实现复杂背景毛玻璃效果；

3、如不兼容上述效果，可以通过设置 background: rgba(255, 255, 255, 0.5) 来回到半透明效果。