CSS で画像の色を変更する

1. CSS で画像の色を変更するには、filter プロパティを使用する
2. CSS の画像の色を変更するには、filter プロパティの opacity() および drop-shadow() 関数を使用する

この記事では、CSS で画像の色を変更するいくつかの方法を紹介します。

CSS で画像の色を変更するには、filter プロパティを使用する

filter プロパティは、CSS で画像のオーバーレイを設定します。

filter プロパティを使用して、画像に視覚的およびグラフィック効果を適用できます。たとえば、filter プロパティを使用して、画像をぼかしたり、コントラストと明るさを変更したり、シャドウ効果、彩度、グレースケール、不透明度を適用したりできます。

filter プロパティを使用して画像に適用できるさまざまなオプションがあります。filter プロパティの構文を以下に示します。

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

%値を使用して、上記のオプションを設定できます。値を小さくすると、画像への影響が少なくなり、その逆も同様です。

パーセンテージ値の代わりに 10 進値を使用することもできます。たとえば、80%に対して 0.8 と書くことができます。

それでは、さまざまなフィルターの例を見てみましょう。

たとえば、URL https://loremflickr.com/320/240 の画像を img タグを使用して 6 回挿入し、クラス 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%); }

CSS の画像の色を変更するには、filter プロパティの opacity() および drop-shadow() 関数を使用する

filter プロパティで opacity() 関数と drop-shadow() 関数を組み合わせることで、CSS の画像の色を変更できます。ドロップシャドウ機能から影の色を指定できます。また、実際の影を形成せずに画像の色が変化するだけになるように、影をできるだけ薄く設定できます。

不透明度により、画像がより見やすくなります。ドロップシャドウ機能を使用して、水平シャドウ、垂直シャドウ、ぼかし半径、広がり値、および色を指定できます。

たとえば、HTML 画像を挿入し、CSS で img タグを選択して、それに filter プロパティを適用します。filter プロパティで、opacity を 0.4 に設定します。次に、ドロップシャドウ関数のパラメータとして値 0 00 赤を設定します。

ここでは、水平シャドウと垂直シャドウに値 0 を設定します。その結果、画像のすぐ後ろに影ができます。

ぼかしの 0 値は、画像のエッジをより鮮明にします。ただし、影には赤の色が適用され、画像は赤みがかった色になります。

このようにして、filter プロパティの opacity() 関数と drop-shadow() 関数を組み合わせて、CSS の画像の色を変更できます。

サンプルコード：

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

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