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

你可以做很多事情：

1. filter: blur(10px)

2. backdrop-filter: blur(10px)

3. 如果要模糊 div 元素的边缘，请使用 box-shadow

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

第三个值 20px 设置模糊值。值越大，模糊程度越高。

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

Answer 3

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

那应该为你做.

Answer 4

这是我发现的:

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

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

Answer 5

我使用 SVG 模糊滤镜得到了模糊效果：

CSS

-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>

工作示例：

https://jsfiddle.net/1k5x6dgm/

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