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中實現。

這個工具提供了對影象新增濾鏡的功能，然後將新增的濾鏡以SVG的形式匯出，並用編輯軟體（editplus,sublime text等軟體就OK）開啟，可以取得裡面的濾鏡相關屬性。

使用

1. 開啟軟體，將影象拖動到軟體的畫布中
   

2. 選擇合適的濾鏡
   

3. 通過檔案 - 另存為匯出SVG

4. 開啟SVG檔案，找到濾鏡的程式碼，一般在svg - defs - filter，將濾鏡程式碼複製到css中即可使用
   

文件參考

SVG濾鏡