html - 对 div 元素的模糊效果

Question

div是否可以在元素上添加高斯模糊？如果是，我该怎么做？

Answer 1

我想这就是你要找的吗？如果您希望为 div 元素添加模糊效果，您可以直接通过 CSS 过滤器执行此操作——参见小提琴：http: //jsfiddle.net/ayhj9vb0/

 div {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  width: 100px;
  height: 100px;
  background-color: #ccc;

}

Answer 2

尝试使用这个库： https ://github.com/jakiestfu/Blur.js-II

那应该为你做。

Answer 3

这是我发现的：

演示：http ://tympanus.net/Tutorials/ItemBlur/

和教程：http ://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/

Answer 4

我使用 SVG 模糊滤镜进行模糊处理：

CSS

-webkit-filter: url(#svg-blur);
        filter: url(#svg-blur);

SVG

<svg id="svg-filter">
    <filter id="svg-blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur>
    </filter>
</svg>

工作示例：

https://jsfiddle.net/1k5x6dgm/

请注意 - 这在 IE 版本中不起作用

Answer 5

模糊 div 的背景元素可以使用backdrop-filter.

像这样使用它：

.your-class-name {
   backdrop-filter: blur(5px);
}

放置在 div 下的所有元素都将通过使用它变得模糊。

编辑：请注意，并非每个浏览器都支持此功能