在 CSS 中更改影象顏色

Subodh Poudel 2023年2月20日 2021年12月20日
  1. 在 CSS 中使用 filter 屬性更改影象顏色
  2. 使用 filter 屬性中的 opacity()drop-shadow() 函式來更改 CSS 中的影象顏色
在 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 的影象六次,並設定類 brightnessblursaturategrayscale,和 contrastimg 標籤,如下例所示。在 CSS 中,選擇 img 標籤並將 width 設定為 25%,將 float 屬性設定為 left

接下來,選擇 brightness 類並使用 filter 屬性將亮度設定為 1.25。同樣,選擇相應的類別並根據類別將 blur 設定為 2pxsaturate 設定為 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。結果,陰影直接位於影象後面。

blur0 值也會使影象邊緣更清晰。但是,紅色顏色將應用於陰影,影象將偏紅。

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

示例程式碼:

<img src="/img/DelftStack/logo.png" />
img{
filter: opacity(0.4) drop-shadow(0 0 0 red); 
}
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn

相關文章 - CSS Image

相關文章 - CSS Color