この記事の結果は次のとおりです。
はじめましょう！
CSS で画像の色を変更する
CSS で画像の色を変更するには、まずフィルター プロパティとその機能について学びます。この方法で理解を深めることができます。
filter CSS プロパティ
画像の視覚効果を制御するには、CSS のフィルター プロパティを使用します。視覚効果は次のとおりです。
- ぼかし
- 輝度
- 色調整
- 影を落とす
- 不透明度
filter プロパティの構文
フィルタ プロパティの構文は次のとおりです。
フィルター : ぼかし ( ) | | 影を落とす ( ) | |不透明度 ( )- ぼかし(): 画像にぼかし効果を適用するために使用されます。
- 影を落とす（）： 画像の上に影を作成します。
- 不透明度(): 画像に透明度を追加するために使用されます。
このフィルター プロパティを使用して、複数のフィルターを使用できます。この記事では画像の色を変更する方法について説明しているので、ここでは drop-shadow() と opacity() 関数を使用する方法を説明します。
影を落とす（）
drop-shadow() は CSS の組み込み関数で、任意の要素または画像に影を設定できます。次のパラメーターは、画像の色を変更するために drop-shadow() 関数で使用されます。
- オフセット-x: 水平方向の影を追加するために使用されます。
- オフセット-y: これを使って縦に影をつけていきます。
- 色： 影はこのパラメータで着色されます。
これらの点を明確にするために、drop-shadow の構文に移りましょう。
影を落とす ( オフセット x オフセット y 色 )- offset-x と offset-y は、正または負の値にすることができます。
- 水平では、正の値は右側に効果を追加するために使用され、負の値は左側に使用されます。
- 縦は下側がプラス、上側がマイナスです。
- 色の代わりに、画像に付けたい任意の色を割り当てることができます。
不透明度()
opacity() は、要素または任意の画像に透明度を追加するために使用されます。 opacity() の構文は次のとおりです。
不透明度 ( 番号 ) ;ここ 「 番号 」 私 不透明度レベルを 0.0 から 1.0 の間で設定するために使用されます。画像を完全に透明にするには、0.0 に設定します。
上記のポイントを明確にするために、例に移りましょう。
CSSで画像の色を変更する方法は?
以下の例では、最初に タグを使用して画像を追加します。
< 画像 クラス = '画像' ソース = 「画像.jpg」 すべての = '' >
< / 体 >
フィルター プロパティを適用する前の結果は次のようでした。
画像の色を変更するには、CSS に移動してフィルター プロパティを適用します。画像の透過性のために不透明度を 0.5 に設定します。 drop-shadow() 関数では、画像の色のみを変更したいので、offset-x と offset-y の値は 0 です。
。画像 {フィルター : 不透明度 ( 0.5 ) 影を落とす ( 0 0 茶色 ) ;
}
実装後の最終結果は次のとおりです。
画像の色が正常に変更されました。
結論
画像の色を変更するには、2 つの CSS 関数 opacity() と drop-shadow() を filter プロパティと共に使用します。 opacity() は画像の透明度を指定し、drop-shadow() は画像に色と影を割り当てます。この記事では、CSS を使用して画像の色を変更する方法について説明しました。