????????? 通過(guò)CSS中的filter濾鏡把圖片轉(zhuǎn)換為純黑或純白 ?????????

通過(guò)CSS中的濾鏡：filter:brightness(0) invert(1);即可實(shí)現(xiàn)把圖片變成純黑或純白！

<img src="img.svg" style="filter: brightness(0)" title="圖片變純黑">
<img src="img.svg" style="filter: brightness(0) invert(1)" title="圖片變純白">

CSS3 filter(濾鏡) 屬性

Filter	描述
none	默認(rèn)值，沒有效果。
blur(px)	給圖像設(shè)置高斯模糊。"radius"一值設(shè)定高斯函數(shù)的標(biāo)準(zhǔn)差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果沒有設(shè)定值，則默認(rèn)是0；這個(gè)參數(shù)可設(shè)置css長(zhǎng)度值，但不接受百分比值。
brightness(%)	給圖片應(yīng)用一種線性乘法，使其看起來(lái)更亮或更暗。如果值是0%，圖像會(huì)全黑。值是100%，則圖像無(wú)變化。其他的值對(duì)應(yīng)線性乘數(shù)效果。值超過(guò)100%也是可以的，圖像會(huì)比原來(lái)更亮。如果沒有設(shè)定值，默認(rèn)是1。
contrast(%)	調(diào)整圖像的對(duì)比度。值是0%的話，圖像會(huì)全黑。值是100%，圖像不變。值可以超過(guò)100%，意味著會(huì)運(yùn)用更低的對(duì)比。若沒有設(shè)置值，默認(rèn)是1。
drop-shadow (h-shadow v-shadow blur spread color)	給圖像設(shè)置一個(gè)陰影效果。陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。函數(shù)接受<shadow>(在CSS3背景中定義)類型的值，除了"inset"關(guān)鍵字是不允許的。該函數(shù)與已有的box-shadow box-shadow屬性很相似；不同之處在于，通過(guò)濾鏡，一些瀏覽器為了更好的性能會(huì)提供硬件加速。<shadow>參數(shù)如下： <offset-x> <offset-y> (必須) 這是設(shè)置陰影偏移量的兩個(gè) <length>值. <offset-x> 設(shè)定水平方向距離. 負(fù)值會(huì)使陰影出現(xiàn)在元素左邊. <offset-y>設(shè)定垂直距離.負(fù)值會(huì)使陰影出現(xiàn)在元素上方。如果兩個(gè)值都是0, 則陰影出現(xiàn)在元素正后面 (如果設(shè)置了 <blur-radius> and/or <spread-radius>，會(huì)有模糊效果). <blur-radius> (可選) 這是第三個(gè)code><length>值. 值越大，越模糊，則陰影會(huì)變得更大更淡.不允許負(fù)值若未設(shè)定，默認(rèn)是0 (則陰影的邊界很銳利). <spread-radius> (可選) 這是第四個(gè) <length>值. 正值會(huì)使陰影擴(kuò)張和變大，負(fù)值會(huì)是陰影縮小.若未設(shè)定，默認(rèn)是0 (陰影會(huì)與元素一樣大小). 注意: Webkit, 以及一些其他瀏覽器不支持第四個(gè)長(zhǎng)度，如果加了也不會(huì)渲染。 <color> (可選) 查看 <color>該值可能的關(guān)鍵字和標(biāo)記。若未設(shè)定，顏色值基于瀏覽器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中，會(huì)應(yīng)用colorcolor屬性的值。另外, 如果顏色值省略，WebKit中陰影是透明的。
grayscale(%)	將圖像轉(zhuǎn)換為灰度圖像。值定義轉(zhuǎn)換的比例。值為100%則完全轉(zhuǎn)為灰度圖像，值為0%圖像無(wú)變化。值在0%到100%之間，則是效果的線性乘子。若未設(shè)置，值默認(rèn)是0；
hue-rotate(deg)	給圖像應(yīng)用色相旋轉(zhuǎn)。"angle"一值設(shè)定圖像會(huì)被調(diào)整的色環(huán)角度值。值為0deg，則圖像無(wú)變化。若值未設(shè)置，默認(rèn)值是0deg。該值雖然沒有最大值，超過(guò)360deg的值相當(dāng)于又繞一圈。
invert(%)	反轉(zhuǎn)輸入圖像。值定義轉(zhuǎn)換的比例。100%的價(jià)值是完全反轉(zhuǎn)。值為0%則圖像無(wú)變化。值在0%和100%之間，則是效果的線性乘子。若值未設(shè)置，值默認(rèn)是0。
opacity(%)	轉(zhuǎn)化圖像的透明程度。值定義轉(zhuǎn)換的比例。值為0%則是完全透明，值為100%則圖像無(wú)變化。值在0%和100%之間，則是效果的線性乘子，也相當(dāng)于圖像樣本乘以數(shù)量。若值未設(shè)置，值默認(rèn)是1。該函數(shù)與已有的opacity屬性很相似，不同之處在于通過(guò)filter，一些瀏覽器為了提升性能會(huì)提供硬件加速。
saturate(%)	轉(zhuǎn)換圖像飽和度。值定義轉(zhuǎn)換的比例。值為0%則是完全不飽和，值為100%則圖像無(wú)變化。其他值，則是效果的線性乘子。超過(guò)100%的值是允許的，則有更高的飽和度。若值未設(shè)置，值默認(rèn)是1。
sepia(%)	將圖像轉(zhuǎn)換為深褐色。值定義轉(zhuǎn)換的比例。值為100%則完全是深褐色的，值為0%圖像無(wú)變化。值在0%到100%之間，則是效果的線性乘子。若未設(shè)置，值默認(rèn)是0；
url()	URL函數(shù)接受一個(gè)XML文件，該文件設(shè)置了一個(gè)SVG濾鏡，且可以包含一個(gè)錨點(diǎn)來(lái)指定一個(gè)具體的濾鏡元素。例如：filter: url(svg-url#element-id)
initial	設(shè)置屬性為默認(rèn)值
inherit	從父元素繼承該屬性