css如何換圖片顏色

這篇文章主要介紹css如何換圖片顏色，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)專(zhuān)業(yè)為企業(yè)提供范縣網(wǎng)站建設(shè)、范縣做網(wǎng)站、范縣網(wǎng)站設(shè)計(jì)、范縣網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、范縣企業(yè)網(wǎng)站模板建站服務(wù)，十多年范縣做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

css實(shí)現(xiàn)圖片換顏色的方法：首先創(chuàng)建一個(gè)HTML示例文件；然后通過(guò)設(shè)置圖片的屬性為“img {filter: grayscale(10);}”來(lái)更換圖片顏色即可。

filter屬性定義了元素(通常是<img>)的可視效果，此屬性主要用于圖像內(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：使用灰度濾鏡將彩色圖像更改為灰度圖像

原圖：

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ì)圖像使用許多過(guò)濾器。

<!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è)資訊頻道！

分享名稱(chēng)：css如何換圖片顏色
分享網(wǎng)址：http://muchs.cn/article30/pjjiso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、域名注冊(cè)、微信公眾號(hào)、品牌網(wǎng)站建設(shè)、軟件開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)

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