使用CSS快速變更PNG影像的顏色（兩種方法）-css教學-PHP中文網

使用CSS快速變更PNG影像的顏色（兩種方法）

藏色散人

發布： 2021-10-18 17:14:42

原創

5799 人瀏覽過

在上一篇《如何用HTML和CSS製作玻璃/模糊效果？》文章中為大家介紹了用HTML和CSS製作玻璃/模糊效果的方法，有興趣的朋友可以閱讀了解一下~

本文將為大家介紹如何使用CSS快速更改PNG圖像的色，這也是日常開發中比較常見一個效果實現方法。

首先大家可以先下載本文中展示的png圖片素材，下載網址：//m.sbmmt.com/xiazai/sucai/1733

使用CSS快速變更PNG影像的顏色（兩種方法）

（可在這裡下載原圖）

下面我將介紹給大家兩個實作方法：

##第一種方法

本範例使用灰階濾鏡將彩色影像變更為灰階影像。

程式碼如下：

<!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>

登入後複製

效果如下圖：

使用CSS快速變更PNG影像的顏色（兩種方法）

#第二種方法

#此範例對影像使用了很多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>

登入後複製

效果如下圖：

使用CSS快速變更PNG影像的顏色（兩種方法） ##那麼這裡需要大家了解一個重要的屬性filter ：

filter屬性定義了元素(通常是使用CSS快速變更PNG影像的顏色（兩種方法） )的視覺效果(例如：模糊與飽和度)。

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中文網其他相關文章！