图片添加CSS滤镜和SVG滤镜实现模糊阴影等效果

CSS滤镜

什么是CSS滤镜

CSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。

简而言之，就是在CSS中提供了一些已经预定义的属性或函数，实现图像的模糊、变色等效果。

函数

blur()

给图像设置高斯模糊，值越大越模糊，如果没有设定值，那么默认为0，只能设备CSS的长度值，如px、rem等，不支持百分比。

filter: blur(5px);

原图	css

brightness()

给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。

filter: brightness(0.5)

原图	css

contrast()

调整图片的对比度，0%时图像全黑，100%时图像不变，超过100%时指运用更低的对比，默认为1

filter: contrast(200%)

原图	css

drop-shadow()

给图像设置一个阴影效果，和css中的box-shadow相似，不同的是，drop-shadow()中不可以指定inset，其余均相同。

filter: drop-shadow(16px 16px 10px black)

原图	css

grayscale()

设置图像的灰度，100%则为灰度图像，0%则图像无变化，值只能在0%-100%之间，默认为0。

filter: grayscale(100%)

原图	css

hue-rotate()

图像色相旋转，参数为deg，值在0deg-360deg之间，超过360deg意味着旋转了一周，并无实际意义。

filter: hue-rotate(90deg)

原图	css

invert()

反转图像，值是转换的比例，值在0%-100%之间，100%则完全反转，0%则无变化，可以实现曝光的效果。

filter: invert(100%)

原图	css

opacity()

转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

filter: opacity(50%)

saturate()

转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。

filter: saturate(200%)

原图	css

sepia()

将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。

filter: sepia(100%)

原图	css

复合使用

filter: <filter-function> [<filter-function>]* | none

你可以组合任意数量的函数来控制渲染，例如：

filter: contrast(175%) brightness(30%);

原图	css

filter: drop-shadow(16px 16px 20px red) invert(75%);

原图	css

SVG滤镜

什么是SVG滤镜

SVG滤镜用来增加对SVG图形的特殊效果，给图像添加svg滤镜也可以实现图像的各种显示效果。

如何使用SVG滤镜

在CSS滤镜中有一个url()函数，这个函数接受一个SVG文件，在此文件中设置一个SVG滤镜，在函数中引用，即可实现SVG滤镜，如：

/*定义一个svg文件test.svg*/
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter id="green">
            <feColorMatrix type="matrix" values="
                0 0 0 0 0
                0 1 0 0 0
                0 0 0 0 0
                0 0 0 1 0 "/>
        </filter>
    </defs>
</svg>

/*在css中引用这个文件中的滤镜效果*/
filter:url("test.svg#green");

可以看出，滤镜是定义在test.svg的filter中，再在css中引用定义的名称为green的滤镜，可以实现图片变绿的效果。

上述CSS滤镜中的很多图像效果，都可以使用SVG滤镜实现，下面介绍几个。

实现CSS滤镜效果

blur

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  </filter>
</svg>

brightness

<svg height="0" xmlns="http://www.w3.org/2000/svg">
 <filter id="brightness">
    <feComponentTransfer>
        <feFuncR type="linear" slope="[amount]"/>
        <feFuncG type="linear" slope="[amount]"/>
        <feFuncB type="linear" slope="[amount]"/>
    </feComponentTransfer>
  </filter>
</svg>

contrast

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="contrast">
    <feComponentTransfer>
      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
    </feComponentTransfer>
  </filter>
</svg>

drop-shadow

<svg height="0" xmlns="http://www.w3.org/2000/svg">
 <filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
    <feFlood flood-color="[color]"/>
    <feComposite in2="offsetblur" operator="in"/>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
</svg>

如何自定义svg滤镜

自定义SVG滤镜需要有SVG知识，相关的知识可以自行在网上查找，笔者这里介绍一个可以取得滤镜效果代码的工具，可以使用工具导出的SVG中的滤镜效果，加入到CSS中实现。

Inkscape

这个工具提供了对图像添加滤镜的功能，然后将添加的滤镜以SVG的形式导出，并用编辑软件（editplus,sublime text等软件就OK）打开，可以取得里面的滤镜相关属性。

使用

1. 打开软件，将图像拖动到软件的画布中
   

2. 选择合适的滤镜
   

3. 通过文件 - 另存为导出SVG

4. 打开SVG文件，找到滤镜的代码，一般在svg - defs - filter，将滤镜代码复制到css中即可使用
   

文档参考

filter - CSS：层叠样式表 | MDN

svg滤镜, 更丰富的色彩魔法!!

SVG滤镜

原文地址: 图片添加CSS滤镜和SVG滤镜实现模糊阴影等效果