給定一個圖像,如何使用CSS更改PNG圖像的顏色?下面本篇文章就來給大家使用CSS更改PNG圖像顏色的方法,希望對大家有所幫助。
原文地址:如何使用CSS更改PNG圖像的顏色?
在CSS中使用Filter屬性,利用濾鏡功能來更改png圖像顏色;CSS的Filter屬性主要用於設置圖像的視覺效果。
Filter屬性存在許多屬性值:
filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|
opacity()|saturate()|sepia()|url();
示例1:使用灰度濾鏡將彩色圖像更改爲灰度圖像
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轉換爲灰度圖像</title>
<style>
img {
filter: grayscale(10);
}
</style>
</head>
<body>
<img src="https://img.php.cn/upload/article/000/000/006/5d171d34606c9824.jpg"
width="500px" height="250px" alt="filter applied" />
</body>
</body>
</html>
輸出:
原始圖像:
應用過濾器後:
示例2:此示例對圖像使用許多過濾器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>將圖像轉換爲不同的顏色</title>
<style>
img {
float:left;
}
.image1 {
filter: invert(100%);
}
.image2 {
filter: sepia(100%);
}
</style>
</head>
<body>
<img src="https://img.php.cn/upload/article/000/000/006/5d171d34606c9824.jpg"
class = "image1" width="500px" height="250px" alt="filter applied" />
<img src="https://img.php.cn/upload/article/000/000/006/5d171d34606c9824.jpg"
class = "image2" width="500px" height="250px" alt="filter applied" />
</body>
</body>
</html>
效果圖:
推薦閱讀: