在 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);
}
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