模糊对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

这是我发现的：

但是：Kua zxsw指出

和教程：http://tympanus.net/Tutorials/ItemBlur/

Answer 4

我使用SVG模糊滤镜模糊了：

CSS

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

SVG

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

工作范例：

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

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