2012-08-15 88 views
26

是否可以在div元素上添加高斯模糊?如果是的话,我该如何做到这一点?对div元素的模糊效果

+1

你发现了这么远吗?你是否使用过这个问题? – 2012-08-15 20:54:37

+0

[HTML5高斯模糊效果]的可能重复(http://stackoverflow.com/questions/2975089/html5-gaussian-blur-effect) – 2012-08-15 20:55:50

+0

可能的重复[如何将CSS 3模糊滤镜应用于背景图像我设置背景图像?](http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image-that-i-am -set-with-ba) – Pureferret 2015-03-16 09:27:10

回答

7

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

应该这样做对你。

+1

它有铬+的错误,它缓慢的页面加载。 – 2014-11-10 04:28:20

+0

断开链接。尝试[blur.js版本II](https://github.com/jakiestfu/Blur.js-II) – 2016-02-08 17:52:11

29

我认为这是你在找什么?如果您正在寻找添加一个模糊效果的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; 

}