css 怎么将一个div做成高斯模糊

Question

一般都是 fitter，但是这种方法都是需要找一张图片来实现，但是如果只是一个 div 背景色是黑色，然后做成毛玻璃那种样式应该怎么实现，我就是想做一个弹窗，弹窗背景就是毛玻璃效果，能稍微看到点后面页面的内容，谢谢大家的不吝指教。

Answer 1

黑色的高斯模糊是黑色啊，没毛病，如果需要毛玻璃的话，在图片上生成一些噪点然后filter

Answer 2

使用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>

Answer 3

<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>

Answer 4

近期有个新的功能，先写下，作为参考

.navbar {
    /* Safari for macOS & iOS */
    -webkit-backdrop-filter: blur(15px); 
    /* Google Chrome */
    backdrop-filter: blur(15px); 
    /* 设置背景半透明黑色 */
    background: rgba(0, 0, 0, 0.8); 
}

参考 https://developer.mozilla.org...