对 div 元素的模糊效果答案

【问题标题】：Blur effect on a div element对 div 元素的模糊效果
【发布时间】：2012-08-15 20:53:10
【问题描述】：

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

【问题讨论】：

到目前为止你发现了什么？你用谷歌搜索过这个问题吗？
HTML5 Gaussian blur effect的可能重复
How to apply a CSS 3 blur filter to a background image that I am setting with background-image?的可能重复

【解决方案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;

}

【讨论】：

正是我所需要的。

【解决方案2】：

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

你应该这样做。

【讨论】：

它有 chrome 的错误 + 页面加载缓慢。

【解决方案3】：

这是我发现的：

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

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

【讨论】：

【解决方案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 版本中不起作用

【讨论】：

【解决方案5】：

使用backdrop-filter可以实现对div背景元素的模糊处理。

像这样使用它：

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

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

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

【讨论】：

【解决方案6】：

你可以做很多事情：

filter: blur(10px)
backdrop-filter: blur(10px)
如果要模糊 div 元素的边缘，请使用 box-shadow

box-shadow: 10px 20px 20px grey;

第三个值 20px 设置模糊值。值越大，模糊越多。

您可以使用其中任何一种，但请注意 backdrop-filter 不支持 Firefox 和 Internet Explorer 的浏览器。

【讨论】：