关键属性:backdrop-filter
参考了Apple 官网,参数与 Apple 官网一致
// 背景高斯模糊@supports (-webkit-backdrop-filter: saturate(180%) blur(20px)) or (backdrop-filter: saturate(180%) blur(20px)) {// 背景白色高斯模糊.bg_white_backdrop {background-color: rgba(255, 255, 255, .7) !important;backdrop-filter: saturate(180%) blur(20px);}// 背景黑色高斯模糊.bg_black_backdrop {background-color: rgba(0, 0, 0, .7) !important;backdrop-filter: saturate(180%) blur(20px);}}
saturate 设置背景色彩饱和度,blur 设置模糊的半径
在需要背景模糊的元素上添加样式:
<div class="bg_white_backdrop">...</div>
兼容性:兼容大部分浏览器,不兼容IE