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

Exia
  • 176

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

评论
阅读 3.6k
4 个回答
✓ 已被采纳

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

使用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); 
}

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

宣传栏