CSS filter屬性

filter

• 將模糊或者顏色偏移等圖像效果用於元素，通常用於調整圖像，背景和邊框的渲染
• css 標准中已內置一些預定義效果的函數，也可通過url使用SVG濾鏡

語法

/* URL to SVG filter */
filter: url(filter.svg#id);

/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Multiple filters */
filter: contrast(175%) brightness(3%);

/* Global values */
filter: inherit;
filter: initial;
filter: unset;

濾鏡屬性

• 需要設定某一函數的值。如果該值無效，函數返回“none“。

url()

• url 函數接收一個XML文件，該文件是一個SVG filter，並且包含一個ID值 來指定哪一個濾鏡

filter:url(resources.svg#c1) 

blur()

• 定義模糊度
• 可以接受css長度單位，不接受百分比

filter:blur(5px)

brightness()

• 定義亮度
• 默認為1， 1-0 逐漸變暗，1以上逐漸變亮
• 可以是百分比， 不能為負數

contrast()

• 定義對比度
• 1-0 逐漸變成灰黑 1以上顏色逐漸變艷麗
• 可以是百分比， 不能為負數

drop-shadow()

• 定義陰影效果，合成在圖像下面，
• 參數 和 shadow, box-shadow 相似
• 和shadow, box-shadow屬性不同之處在於通過filter，一些瀏覽器為了提升性能會提供硬件加速。
  傳參順序從左至右：
  1. 水平偏移距離正值右偏，負值左偏（offset-x）。必傳
  2. 垂直偏移距離正值向下偏，負值上偏（offset-y）。必傳
  3. 一個length值(表示距離尺寸的一種css數據格式) 值越大，越模糊陰影會變得更大更淡.）不允許負值 默認為0 （blur-radius）可選
  4. 一個length值，正值會使陰影擴張和變大，負值會是陰影縮小，默認 0
  5. color 色值，在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 會應用color 屬性的值,顏色值省略，WebKit中陰影是透明的。

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

grayscale()

• 定義灰度
• 取值0 - 1的數值之間，可設置百分比，不可為負數

filter:grayscale(50%);

hue-rotate()

• 定義顏色，色相旋轉調整
• 單位 deg
• 可為負值

filter: hue-rotate(90deg)

invert()

• 反向輸入圖，定義轉換比例
• 默認0 0%和100%之間，則是效果的線性乘子。

filter: invert(100%)

opacity()

• 轉化圖像的透明程度
• 類似於css的opacity屬性
• 1-0 逐漸變透明，支持百分比 ，不能為負數
• 和opacity屬性不同之處在於通過filter，一些瀏覽器為了提升性能會提供硬件加速。

filter: opacity(50%)

saturate()

• 定義圖像飽和度
• 1-0 至完全不包和，1為正常， 1以上飽和度更高，更艷麗，支持百分比

filter:saturate(369%)

sepia()

• 定義深褐色的色度
• 0 - 1 逐漸變為深褐色 支持百分比，不支持負數

filter: sepia(100%)

組合函數

• 可以將任意數量的函數一起控制渲染，其中有一個不符合規范將全部失效

filter:sepia(100%) saturate(369%) opacity(50%)

兼容性