css如何換圖片顏色-創(chuàng)新互聯(lián)

這篇文章主要介紹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示例文件；然后通過設(shè)置圖片的屬性為“img {filter: grayscale(10);}”來更換圖片顏色即可。

filter屬性定義了元素(通常是<img>)的可視效果，此屬性主要用于圖像內(nèi)容。

該屬性是將過濾器效果應(yīng)用于web頁面上的元素(主要是圖像)的CSS方法。

語法：

filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();

Filter 函數(shù)

注意： 濾鏡通常使用百分比 (如：75%), 當(dāng)然也可以使用小數(shù)來表示 (如：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)周圍的度數(shù)。默認(rèn)值為0deg，表示原始圖像；該值雖然沒有較大值，超過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)來指定一個(gè)具體的濾鏡元素。

說明：通過將多個(gè)過濾器函數(shù)傳遞給filter屬性，可以將多個(gè)過濾器應(yīng)用于元素；函數(shù)是空格分隔的。

示例1：使用灰度濾鏡將彩色圖像更改為灰度圖像

原圖：

css如何換圖片顏色

代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轉(zhuǎn)換為灰度圖像</title>
<style>
img {
filter: grayscale(10);
}
</style>
</head>
<body>
<img src="https://img.html.cn/upload/article/000/000/006/5d171d34606c9824.jpg" width="500px" height="250px" alt="filter applied" />
</body>
</body>
</html>

效果圖：

css如何換圖片顏色

示例2：此示例對(duì)圖像使用許多過濾器。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>將圖像轉(zhuǎn)換為不同的顏色</title>
<style>
img {  
                float:left; 
            } 
            .image1 { 
                filter: invert(100%); 
            } 
            .image2 { 
                filter: sepia(100%);    
            }
</style>
</head>
<body>
<img src="https://img.html.cn/upload/article/000/000/006/5d171d34606c9824.jpg" class = "image1"  width="500px" height="250px" alt="filter applied" />
          
     <img src="https://img.html.cn/upload/article/000/000/006/5d171d34606c9824.jpg" class = "image2"  width="500px" height="250px" alt="filter applied" /> 
</body>
</body>
</html>

效果圖：

css如何換圖片顏色

以上是“css如何換圖片顏色”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：css如何換圖片顏色-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://muchs.cn/article42/cshgec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、虛擬主機(jī)、Google、網(wǎng)站改版、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作