扣丁学堂HTML5培训简述HTML5利用svg页面高斯模糊的方法

高斯模糊这项技术相信小伙伴们应该不是非常陌生，本篇文章扣丁学堂HTML5培训小编给读者们分享一下HTML5利用svg页面高斯模糊的方法，对此感兴趣的小伙伴就随小编来了解一下吧，希望对小伙伴们有帮助。

先在页面任意区域放上这段代码

stdDeviation设置模糊量，最低0

<svg style="display:none">
 <filter id="blur-effect-1">
 <feGaussianBlur stdDeviation="1"/>
 </filter>
 <filter id="blur-effect-2">
 <feGaussianBlur stdDeviation="2"/>
 </filter>
</svg>

在dom上调用模糊效果

document.body.style.filter='url(#blur-effect-2)' //调用2级模糊量
document.body.removeAttribute("style");//关闭模糊效果

想要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导，此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。

H5基础课程：https://ke.qq.com/course/320523?flowToken=1008606【扫码进入HTML5前端开发VIP免费公开课】

注：点击(了解更多)进入课程直播间