在上一篇《如何用HTML和CSS製作玻璃/模糊效果？ 》文章中為大家介紹了用HTML和CSS製作玻璃/模糊效果的方法，有興趣的朋友可以閱讀了解一下~
本文將為大家介紹如何使用CSS快速更改PNG圖像的色，這也是日常開發中比較常見一個效果實現方法。
首先大家可以先下載本文中展示的png圖片素材，下載網址：https://www.php.cn/xiazai/sucai/1733
（可在這裡下載原圖）
下面我將介紹給大家兩個實作方法：
##第一種方法
本範例使用灰階濾鏡將彩色影像變更為灰階影像。 程式碼如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img {
filter: grayscale(10);
}
</style>
</head>
<body>
<h2>灰度图像</h2>
<img src=
"001.png"
width="500px" height="250px" alt="filter applied" />
</body>
</html>
#第二種方法
#此範例對影像使用了很多filter~程式碼如下：<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img {
width:40%;
float:left;
}
.image1 {
filter: invert(100%);
}
.image2 {
filter: sepia(100%);
}
</style>
</head>
<body>
<img class = "image1" src=
"001.png"
width="500px" height="250px" alt="filter applied" />
<img class = "image2" src=
"001.png"
width="500px" height="250px" alt="filter applied" />
</body>
</html>
##那麼這裡需要大家了解一個重要的屬性filter ：
filter屬性定義了元素(通常是)的視覺效果(例如：模糊與飽和度)。
Filter屬性主要用於設定影像的視覺效果，Filter 功能存在許多屬性值，語法如下：
filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()
|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
-------------------------------------------------------------------------------
使用空格分隔多个滤镜濾鏡通常使用百分比(如：75%), 當然也可以使用小數來表示(如：0.75)。
附註：舊版 Internet Explorer 瀏覽器(4.0 to 8.0) 支援的非標準 "filter" 屬性已被廢棄。 IE8 及更低版本瀏覽器通常使用 opacity 屬性。
PHP中文網路平台有非常多的影片教學資源，歡迎大家學習《
css影片教學》！
以上是使用CSS快速變更PNG影像的顏色（兩種方法）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
