在 CSS 中更改影象顏色

1. 在 CSS 中使用 filter 屬性更改影象顏色
2. 使用 filter 屬性中的 opacity() 和 drop-shadow() 函式來更改 CSS 中的影象顏色

本文將介紹幾種在 CSS 中改變圖片顏色的方法。

在 CSS 中使用 filter 屬性更改影象顏色

filter 屬性在 CSS 中設定影象的疊加。

我們可以使用 filter 屬性在影象中應用視覺和圖形效果。例如，我們可以使用 filter 屬性模糊影象、更改對比度和亮度、應用陰影效果、飽和度、灰度和不透明度。

我們可以將多種選項應用於具有 filter 屬性的影象。filter 屬性的語法如下所示。

filter: none | brightness() | greyscale () | contrast () | opacity () | saturate ();

我們可以使用 % 值來設定上述選項。較低的值對影象的影響較小，反之亦然。

我們也可以使用十進位制值代替百分比值。例如，我們可以用 80% 來表示 0.8。

現在，讓我們看一下不同過濾器的示例。

例如，使用 img 標籤插入帶有 URL https://loremflickr.com/320/240 的影象六次，並設定類 brightness、blur、saturate、grayscale，和 contrast 到 img 標籤，如下例所示。在 CSS 中，選擇 img 標籤並將 width 設定為 25%，將 float 屬性設定為 left。

接下來，選擇 brightness 類並使用 filter 屬性將亮度設定為 1.25。同樣，選擇相應的類別並根據類別將 blur 設定為 2px、saturate 設定為 300%、grayscale 設定為 200% 和 contrast 設定為 60%。

在這裡，第一張影象是原始影象，其餘影象包含過濾器。因此，我們可以使用 filter 屬性來更改 CSS 中的影象顏色。

示例程式碼：

<img src="/img/DelftStack/logo.png" />
<img class="brightness" src="/img/DelftStack/logo.png" />
<img class="blur" src="/img/DelftStack/logo.png" />
<img class="saturate" src="/img/DelftStack/logo.png" />
<img class="grayscale" src="/img/DelftStack/logo.png" />
<img class="contrast" src="/img/DelftStack/logo.png" />

img {
 width:25%;
 float:left;  
}

.brightness { filter: brightness(1.25); }
.blur { filter: blur(2px); }
.saturate { filter: saturate(300%); }
.grayscale { filter: grayscale(200%); }
.contrast { filter: contrast(60%); }

使用 filter 屬性中的 opacity() 和 drop-shadow() 函式來更改 CSS 中的影象顏色

我們可以通過組合 filter 屬性中的 opacity() 和 drop-shadow() 函式來更改 CSS 中的影象顏色。我們可以從 drop-shadow 函式中提供陰影的顏色，我們可以將陰影設定得儘可能細，這樣影象的顏色只會改變而不會形成實際的陰影。

不透明度將為圖片提供更明顯的顏色。我們可以使用 drop-shadow 函式指定水平陰影、垂直陰影、模糊半徑、傳播值和顏色。

例如，插入一個 HTML 影象，在 CSS 中選擇 img 標籤，然後對其應用 filter 屬性。在 filter 屬性中，將 opacity 設定為 0.4。接下來，將值 0 0 0 red 設定為 drop-shadow 函式的引數。

在這裡，我們為水平和垂直陰影設定值 0。結果，陰影直接位於影象後面。

blur 的 0 值也會使影象邊緣更清晰。但是，紅色顏色將應用於陰影，影象將偏紅。

通過這種方式，我們可以結合 filter 屬性中的 opacity() 和 drop-shadow() 函式來更改 CSS 中的影象顏色。

示例程式碼：

<img src="/img/DelftStack/logo.png" />

img{
filter: opacity(0.4) drop-shadow(0 0 0 red); 
}