這篇文章主要介紹css如何換圖片顏色，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的隨州網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！css實(shí)現(xiàn)圖片換顏色的方法：首先創(chuàng)建一個(gè)HTML示例文件；然后通過(guò)設(shè)置圖片的屬性為“img {filter: grayscale(10);}”來(lái)更換圖片顏色即可。
filter屬性定義了元素(通常是)的可視效果，此屬性主要用于圖像內(nèi)容。
該屬性是將過(guò)濾器效果應(yīng)用于web頁(yè)面上的元素(主要是圖像)的CSS方法。
語(yǔ)法：
filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
Filter 函數(shù)
注意： 濾鏡通常使用百分比 (如：75%), 當(dāng)然也可以使用小數(shù)來(lái)表示 (如：0.75)。
none：這是默認(rèn)值，不適用任何效果。
brightness()：設(shè)置元素的亮度。如果亮度為0％則為全黑，如果亮度為100％，則與原始亮度相同。大于100％結(jié)果的值是更明亮的元素。
grayscale()：設(shè)置元素的灰度，它將元素顏色轉(zhuǎn)換為黑色和白色。灰度0％表示原始元素，100％表示完全灰度元素。
sepia()：它將圖像轉(zhuǎn)換為棕褐色圖像，其中0％表示原始圖像，100％表示完全棕褐色。
contrast()：用于調(diào)整元素的對(duì)比度。0％對(duì)比度表示完整的黑色元素，100％對(duì)比度表示原始元素。
saturate()：用于設(shè)置元素的飽和度。0％飽和度表示元素完全不飽和，100％飽和表示原始圖像。大于100％結(jié)果的值是超飽和元素。
blur()：它將模糊效果應(yīng)用于元素。如果未指定模糊值，則默認(rèn)值為0。
opacity()：它設(shè)置圖像的不透明度效果。0％不透明度表示元素完全透明，如果不透明度為100％，則表示原始圖像。
hue-rotate()：它將色調(diào)旋轉(zhuǎn)應(yīng)用于圖像。該值定義將調(diào)整圖像樣本的色環(huán)周?chē)亩葦?shù)。默認(rèn)值為0deg，表示原始圖像；該值雖然沒(méi)有較大值，超過(guò)360deg的值相當(dāng)于又繞一圈。
invert()：它反轉(zhuǎn)元素。默認(rèn)值為0％，表示原始圖像。100％使圖像完全反轉(zhuǎn)。
drop-shadow()：它對(duì)元素應(yīng)用陰影效果。它接受h-shadow，v-shadow，blur，spread和color作為值。
url()：接受一個(gè)XML文件，該文件設(shè)置了 一個(gè)SVG濾鏡，且可以包含一個(gè)錨點(diǎn)來(lái)指定一個(gè)具體的濾鏡元素。
說(shuō)明：通過(guò)將多個(gè)過(guò)濾器函數(shù)傳遞給filter屬性，可以將多個(gè)過(guò)濾器應(yīng)用于元素；函數(shù)是空格分隔的。
示例1：使用灰度濾鏡將彩色圖像更改為灰度圖像
原圖：
代碼：
重慶分公司
重慶分公司