今天小编跟大家讲解下有关CSS Blur() 将高斯模糊应用于输出图片 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关CSS Blur() 将高斯模糊应用于输出图片 的相关资料,希望小伙伴们看了有所帮助。
一、css Blur()
blur() css 方法将高斯模糊应用于输出图片. 结果为 <filter-function>.
blur(radius)radius模糊的半径,值为<length>。 它定义了高斯函数的标准偏差值,即屏幕上有多少像素相互融合; 因此,较大的值会产生更多模糊。 值为0会使输入保持不变。 该值为空则为
blur(0) blur(8px) blur(1.17rem)二、示例:
<!DOCTYPE html><html><head><style>img { -webkit-filter: blur(5px); filter: blur(5px);}</style></head><body><p>图片使用高斯模糊效果:</p><img src="http://www.aidi.net.cn/article/detial/4623/pineapple.jpg"alt="Pineapple"width="300"height="300"><p><strong>注意:</strong> Internet Explorer 不支持 filter 属性。</p></body></html>来源:爱蒂网