请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
CSS的filter滤镜,设为 filter: blur(2px);,可以令整个元素模糊。注意,是整个元素!以下图片,左边是原图,右边图使用了两个像素的CSS模糊滤镜:
<img alt="" src="https://638183.freep.cn/638183/t23/1/timestop.png" />
<img alt="" src="https://638183.freep.cn/638183/t23/1/timestop.png" style="filter: blur(2px);" />
有时候,出于特定需要,我们只想让图片的特定区域模糊化。这时,需要请svg滤镜出场。svg滤镜与CSS滤镜同出一源,功能大抵一致,但svg滤镜拥有更高的自由度,能对元素做出更精细的过滤。此前,我们介绍过高斯模糊滤镜 feGaussianBlur,它可以设置模糊过滤效果的起点{x,y}和宽高尺寸(width和height)。考虑如下代码:
<feGaussianBlur x="36" y="255" width="40" height="30" stdDeviation="5" in="SourceGraphic" />
上面的高斯滤镜代码,它设定的模糊效果从元素的{36,255}坐标点开始,模糊宽度40px、高度30px,模糊度是5px,作用范围是整个元素。这句代码不会达到我们的预期,in="SourceGraphic" 属性的设定表明,它作用于整个过滤对象,结果是,我们可能看不到元素的真容,仅看到滤镜的样子即 40*30 的渐变灰色矩形。这是因为,in 属性的指定是整个元素,而 x、y、width、height 的设定与之相冲突。处理方法是将原图和滤镜合并起来,需要分两步走,一是改造高斯滤镜,取消 in 属性,取代它的是建立一个快照(result="mohu")留待后面调用,二是使用svg独有的合并滤镜 feMerge 和 feMergeNode 组合,将源与滤镜进行合并。请看代码:
<svg width="300" height="389">
<filter id="myFilter">
<feGaussianBlur x="36" y="255" width="40" height="30" stdDeviation="5" result="mohu" />
<feMerge>
<feMergeNode in="SourceGraphic" />
<feMergeNode in="mohu" />
</feMerge>
</filter>
<image href="https://638183.freep.cn/638183/t23/1/timestop.png" filter="url(#myFilter)" />
</svg>
feMerge 是合并滤镜父标签,feMergeNode 合并滤镜子标签,子标签通过 in 属性具体规定了源和滤镜的叠加方式,第一个合并子滤镜是整个图像,所以 in="SourceGraphic",第二个合并子滤镜是将模糊滤镜合并到源上,所以 in="mohu",换言之,feMerge 滤镜告诉浏览器,将源(in="SourceGraphic")作为底片输出,在其上叠加快照为 mohu 的模糊滤镜(result="mohu")。最后,svg的 image 标签输出图像,通过 filter="url(#myFilter)" 指定滤镜名称。效果如下:
当然,实现相同的功能可能有更简洁的方式,不必如此大费周章。这里,目的是为了展示svg的细致功能,以及合并滤镜初步。关于 feMerge 合并滤镜,将来可能还会接触更多。
html的 img 标签 也可以调用以上svg滤镜,仅需要通过CSS绑定滤镜即可。代码和效果如下:
<img alt="" src="https://638183.freep.cn/638183/t23/1/timestop.png" style="width: 300px; height: 389px; filter: url('#myFilter');" />
|