一般都是 fitter,但是这种方法都是需要找一张图片来实现,但是如果只是一个 div 背景色是黑色,然后做成毛玻璃那种样式应该怎么实现,我就是想做一个弹窗,弹窗背景就是毛玻璃效果,能稍微看到点后面页面的内容,谢谢大家的不吝指教。
一般都是 fitter,但是这种方法都是需要找一张图片来实现,但是如果只是一个 div 背景色是黑色,然后做成毛玻璃那种样式应该怎么实现,我就是想做一个弹窗,弹窗背景就是毛玻璃效果,能稍微看到点后面页面的内容,谢谢大家的不吝指教。
使用svg配合blur
<style type="text/css">
.filtered {
-webkit-filter: url(#f1);
filter: url(#f1);
background: black;
width: 200px;
height: 200px;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="0">
<defs>
<filter id="f1">
<feGaussianBlur stdDeviation="3"/>
</filter>
</defs>
</svg>
<div class="filtered"></div>
<style type="text/css">
.filtered {
-webkit-filter: blur(5px);
/* Chrome, Safari, Opera */
filter: blur(5px);
background: black;
width: 200px;
height: 200px;
}
</style>
<div class="filtered"></div>
近期有个新的功能,先写下,作为参考
.navbar {
/* Safari for macOS & iOS */
-webkit-backdrop-filter: blur(15px);
/* Google Chrome */
backdrop-filter: blur(15px);
/* 设置背景半透明黑色 */
background: rgba(0, 0, 0, 0.8);
}
黑色的高斯模糊是黑色啊,没毛病,如果需要毛玻璃的话,在图片上生成一些噪点然后filter