css中的filter屬性，可以幫助我們給圖片調色，為圖片添加濾鏡。是一個非常強大的屬性，我們可以借由該屬性實現很多我們預想的特殊效果。
filter的屬性值，是一系列的函數返回值，你需要為這些函數設定參數，如果參數無效，函數將會返回none。
filter所支持的調整參數：
-
filter: initial;設置屬性為默認值
filter: inherit;從父元素繼承該屬性，
filter: unset修改所有元素屬性或父元素的值為其父元素的值(如果有繼承)或其初始值;
filter: url(); URL函數接受一個XML文件，可以用來添加svg濾鏡，目前除了火狐都沒有支持
filter: none;清除所有濾鏡效果
注意：可以復合地同時寫多個函數，空格隔開，例如：filter: drop-shadow(0px 0px 10px red) hue-rotate(50deg);
高斯模糊blur()
給圖像設置高斯模糊，即指定多少像素的融合。參數為像素值，不支持百分比值。默認是0；
亮度brightness()
設置圖像的亮度，參數值為百分比數（也可以寫作小數），默認是1，即100%。0%全黑，超過100%會更亮。
對比度cantrast()
調整圖片對比度，同亮度的參數，0%全黑，超出100%，對比度更高。默認為1。
陰影drop-shadow();
給圖像下面合成一個陰影效果，可以設定偏移和模糊度。該函數和已有的boc-shadow屬性很相似，所不同的而是，通過濾鏡，瀏覽器會提供硬件加速渲染以獲得更好的性能。該函數的參數可有四個，一個必須參數：<offset-x>和<offset-y>（像素值）,用於設定陰影的偏移量，如果兩個值都是0，陰影將處於元素的正后方；三個可選參數：陰影模糊度<blur-radius>像素值 spread-radius（像素值，需要注意的是，Webkit以及一些瀏覽器並不支持該值，加了也不會渲染）， color顏色。
因此標准的語法格式是：
語法格式：filter:drop-shadow(<offset-x> <offset-y> <blur-radius> <spread-radius> color )
但是由於<spread-radius>並沒有被廣泛支持，因此一般我們不指定該值，即只指定四個值，例如：
.element{
filter:drop-shadow( 10px 10px 5px black );
}
色相旋轉hue-rotate()
色相色相旋轉，默認值是0deg，最大有效值是360deg，超過360deg也合法，但是相當於繞了一圈而已，例如，460deg等同於460-360 = 100deg;
反轉invert()
反轉，值為0% ~100%。默認為0
不透明度opacity()
透明度，值為0%~100%，默認為1，該函數與已有的opacity屬性很相似，所不同的是，通過filter，一些瀏覽器為了提升性能會提供硬件加速。
飽和度saturate()
飽和度，值為百分比（當然也可以是小數），100% 圖像無變化，超過100%，飽和度越來越高。默認值1。
深褐色sepia()
將圖像轉換為深褐色。值定義轉換的比例。值為100%則完全是深褐色的，值為0%圖像無變化。值在0%到100%之間，若未設置，值默認是0。
示例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="com">
<h2><code>blur()高斯模糊</code></h2>
<img id="image1" src="./image.png" alt="">
<img id="image2" src="./image.png" alt="">
<img id="image3" src="./image.png" alt="">
<h2><code>brightness()亮度</code></h2>
<img id="image4" src="./image.png" alt="">
<img id="image5" src="./image.png" alt="">
<img id="image6" src="./image.png" alt="">
<h2><code>cantrast()對比度</code></h2>
<img id="image7" src="./image.png" alt="">
<img id="image8" src="./image.png" alt="">
<img id="image9" src="./image.png" alt="">
<h2><code>grayscale()灰度</code></h2>
<img id="image10" src="./image.png" alt="">
<img id="image11" src="./image.png" alt="">
<img id="image12" src="./image.png" alt="">
<h2><code>drop-shadow()陰影</code></h2>
<img id="image13" src="./image.png" alt="">
<img id="image14" src="./image.png" alt="">
<img id="image15" src="./image.png" alt="">
<h2><code>hue-rotate()色相旋轉</code></h2>
<img id="image16" src="./image.png" alt="">
<img id="image17" src="./image.png" alt="">
<img id="image18" src="./image.png" alt="">
<h2><code>invert()反轉</code></h2>
<img id="image19" src="./image.png" alt="">
<img id="image20" src="./image.png" alt="">
<img id="image21" src="./image.png" alt="">
<h2><code>opacity()透明度</code></h2>
<img id="image22" src="./image.png" alt="">
<img id="image23" src="./image.png" alt="">
<img id="image24" src="./image.png" alt="">
<h2><code>saturate()飽和度</code></h2>
<img id="image25" src="./image.png" alt="">
<img id="image26" src="./image.png" alt="">
<img id="image27" src="./image.png" alt="">
<h2><code>sepia()深褐色</code></h2>
<img id="image28" src="./image.png" alt="">
<img id="image29" src="./image.png" alt="">
<img id="image30" src="./image.png" alt="">
</div>
</body>
</html>
CSS
img{
height: 100px;
margin: 20px;
}
#image2{
filter: blur(2px);
}
#image3{
filter: blur(5px);
}
#image5{
filter: brightness(50%);
}
#image6{
filter: brightness(280%);
}
#image8{
filter: contrast(20%);
}
#image9{
filter: contrast(280%);
}
#image11{
filter: grayscale(50%);
}
#image12{
filter: grayscale(280%);
}
#image14{
filter: drop-shadow(10px 10px 5px red);
}
#image15{
filter: drop-shadow(0px 0px 20px black);
}
#image17{
filter: hue-rotate(50deg);
}
#image18{
filter: hue-rotate(300deg);
}
#image20{
filter: invert(20%);
}
#image21{
filter: invert(35%);
}
#image23{
filter: opacity(50%);
}
#image24{
filter: opacity(20%);
}
#image26{
filter: saturate(50%);
}
#image27{
filter: saturate(200%);
}
#image29{
filter: sepia(50%);
}
#image30{
filter: sepia(100%);
}
利用該屬性，我們可以簡單的實現png格式圖片的一些簡單變色效果，例如：
<img class="icon" style="vertical-align:middle" src="@/assets/logo/logo.png" width="20px"/>
.icon:hover{
filter: brightness(200%);
}
.icon:active{
filter: brightness(50%);
}
