CSSのfilterプロパティで画像を暗くする方法

「CSSを使って、画像を暗くする方法はある？」

こんな疑問を持つ方に向けて、CSSを利用して画像を暗くする方法を解説します。

次のように、画像にCSSを適用するだけで簡単に画像を暗くすることができます。

元の画像

暗くした画像

この記事で解説する方法は、filterプロパティを利用した方法です。

`filter`プロパティを利用して画像を暗くする

filterプロパティを利用すれば、imgタグの画像と背景画像どちらでも簡単に暗くすることが可能です。

画像を暗くするのは、filterプロパティのbrightness()関数を使います。

次に画像を暗くするCSSの例を示します。

css

<img src="xxx.jpg">

css

img {
    filter: brightness(0.4);
}

これが記事の冒頭で示した、画像を暗くする方法になります。

元の画像

暗くした画像

背景画像を暗くするCSSの例を示します。

tsx

<div></div>

css

div {
    height: 934px;
    background-image: url(xxx.jpg);
    background-size: cover;
    filter: brightness(0.4);
}

これでimgタグで指定した画像と同じように背景画像を暗くすることが可能です。

元の背景画像

暗くした背景画像

以下がbrightness()関数の構文になります。

css

brightness(amount)

引数であるamountは、数値および%を指定できます。

| 値 | 完全に黒 | 効果なし | | --- | --- | --- | | 数値 | 0 | 1 | | パーセント | 0% | 100% |

数値の場合は1以上、%の場合は100%以上の値を指定すると、画像を明るくすることも可能です。

brightness()関数の引数に2を指定すると、以下のようになります。

元の画像

明るくした画像