CSSで画像の明るさを調整する方法

情報技術の発展に伴い、プログラミング分野の技術は急速に成長しています。現在、CSSには、開発者がCSSを使いやすくするための多くの更新と派生物があります。さらに、BootstrapやTailwindCSSなどのさまざまなCSSフレームワークがあります。ウェブサイトのレイアウトを作成する際、画像や写真はウェブサイトページのデザインの重要な部分です。

特定の条件では、画像の上にテキストを配置または上書きする必要があります。たとえば、画像上でキャプションテキストで上書きする場合などです。白のような明るい色のテキストを使用したい場合がありますが、上書きしたい画像も明るい色です。たとえば、雲や空の背景画像を白いテキストで上書きします。明らかに、画像に上書きするテキストははっきりと見えません。たとえば、次の画像を見てください。

上の画像のテキストをはっきりと読むことができますか？なかなか難しいですね。この時点で、画像の色に影響されることなくテキストを表示する方法が必要です。CSSを使用して画像の暗い部分と明るい部分を再生できます。

CSSを使用して画像の明暗を調整する

画像を暗くするには、いくつかの方法を使用できます。たとえば、次の画像を使用して、少し暗くします。

CSSの brightness（）やcontrast（）などのフィルタープロパティを使用して、画像を少し暗くすることができます。

明るさの使用

画像に輝度フィルターを適用すると、画像が明るくまたは暗く見えます。入力した値が0％の場合、画像は完全に黒または暗くなります。一方、値が100％の場合、何も変更されません。50％の値を入力して、画像を少し暗くすることができます。100％を超える値を入力して、結果の画像を明るくすることもできます。値を空白のままにするか、値が割り当てられていない場合、100％の値が自動的に使用されます。

CSS：

結果 ：

コントラストの使用

コントラストフィルターを使用すると、コントラスト値を調整できます。明るさの場合も同様です。入力した値が0％の場合、画像は完全に黒または暗くなり、100％の値は何も変化しません。100％を超える値を入力することもできます。これにより、画像のコントラストが低くなります。

CSS：

結果 ：