微信小程序實現彈窗毛玻璃效果

微信小程序實現毛玻璃彈窗效果

使用方法：
使用 backdrop-filter : blur()配合background : rgba()來實現彈窗的毛玻璃效果。

優點：

• 這種方式省去了多設置一個after偽類來進行背景模糊的麻煩
• 而且backdrop-filter : blur()是自動把該元素后面的背景進行模糊處理，而不需要指定固定的背景來進行模糊

Demo代碼：

WXML 頁面：

<view class='bg_contain'>
	<view class='blur_demo'></view>
</view>


WXSS 樣式：

.bg_contain {
	background-image: url('./image_demo.jpg');
}

.blur_demo {
	background: rgba(250,250,250,0.6);
	backdrop-filter: blur(10px);
}

完成了以上代碼后，就可以實現一個類似於IOS的毛玻璃效果啦~