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;
 

PPT模板下載大全https://redbox.wode007.com

濾鏡屬性

需要設定某一函式的值。如果該值無效，函式返回“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，一些瀏覽器為了提升效能會提供硬體加速。

傳參順序從左至右：

水平偏移距離正值右偏，負值左偏（offset-x）。必傳

垂直偏移距離正值向下偏，負值上偏（offset-y）。必傳

一個length值(表示距離尺寸的一種css資料格式) 值越大，越模糊陰影會變得更大更淡.）不允許負值預設為0 （blur-radius）可選

一個length值，正值會使陰影擴張和變大，負值會是陰影縮小，預設 0

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%)

相容性