模糊一个div元素的影响(Blur effect on a div element)

是否可以添加一个高斯模糊div元素？ 如果是的话，我可怎么办呢？

Answer 1:

我认为这是你在找什么？ 如果你正在寻找一个模糊效果添加到div元素，你可以通过CSS Filters--见拨弄直接做到这一点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浏览器版本一起使用

文章来源: Blur effect on a div element