IE CSS模糊滤镜+canvas高斯模糊实现图片的模糊效果实例页面

回到相关文章 »

代码:

CSS代码:
.blur {
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
}
:root .blur {
    display: none; /* IE9+, Firefox, Chrome, Opera - hidden */
    filter: none; /* no IE9 */
}
                
HTML代码:
<img src="mm1.jpg" />
<img src="mm1.jpg" id="blur" class="blur" />
<canvas id="canvas" width="256" height="191"></canvas>
                
JS代码:
<script src="StackBlur.js"></script>
<script>
stackBlurImage( "blur", "canvas", 20, false );
</script>
                

效果: