H5毛玻璃效果不生效问题

问题描述

毛玻璃效果在Chrome浏览器调试的时候正常，但在手机浏览器上无效。

问题原因

手机浏览器的webkit内核版本比较低，不支持backdrop-filter

解决方案

兼容webkit兼容写法

.frosted-glass{
    ...
    background: rgba(18, 22, 39, 0.16);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

相关资源

Can i use
MDN - # backdrop-filter