CSS で背景画像を暗くする

1. CSS で背景画像を暗くするために線形グラデーションを使用する
2. background-blend-mode プロパティを使用して、CSS の背景画像を暗くする

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

CSS で背景画像を暗くするために線形グラデーションを使用する

CSS 線形グラデーションを使用して、CSS の背景画像を暗くすることができます。linear-gradient() 関数は、線形グラデーションの背景を作成します。線形グラデーションは、少なくとも 2つの異なる色の間のスムーズな遷移です。この関数は、無数のカラーパラメータを取ります。グラデーションの方向を最初のパラメータとして設定できます。方向のオプションは、to right、to left、to bottom right、90deg などです。背景画像に線形グラデーションを適用し、不透明度のある暗い色を設定して背景画像を暗くすることができます。linear-gradient() 関数の rgba() 関数を使用して、色を設定できます。ここでは、他の要素を暗くすることなく、背景画像のみを暗くします。

たとえば、CSS でコンテナを選択し、background 省略形プロパティを使用して線形グラデーションと背景画像を設定します。linear-gradient() 関数を記述し、2つのカラーストップを rgba(0, 0, 0, 0.7) として指定します。次に、url() 関数を使用して、選択した背景画像を設定します。さまざまな背景プロパティを使用して、画像を背景に正しく配置します。background-position を center に、background-repeat を no-repeat に、background-size を cover に設定します。高さを 100%に設定します。必ず body タグと html タグを選択し、高さを 100%に、マージンを 0 に設定してください。

以下の例では、2つのカラーストップとして rgba(0, 0, 0, 0.7) を使用しました。関数 rgba(0, 0, 0) は黒色に相当します。4 番目の値は、不透明度の値です。1 に近い値は暗くなり、その逆も同様です。背景画像を暗くする必要性に応じて、不透明度の値を調整できます。このようにして、線形グラデーションを使用して、CSS の背景画像を暗くすることができます。

サンプルコード：

<div id="background"></div>

body, html {
    height: 100%;
    margin: 0;
}

#background {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://loremflickr.com/320/240');
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

background-blend-mode プロパティを使用して、CSS の背景画像を暗くする

background-blend-mode プロパティを使用して、CSS の背景画像を暗くすることができます。このプロパティは、背景の描画モードを設定します。このプロパティにはさまざまなオプションがあります。一部のオプションには、normal、multiply、darken、lighten、saturation などがあります。darken オプションを使用して、背景画像を暗くすることができます。rgba() 関数を使用して、背景画像の色を設定できます。

たとえば、CSS で background id を選択し、background プロパティを使用して色と背景画像を設定します。色を rgba(0, 0, 0, 0.7) に設定し、url() 関数でプレースホルダー画像を使用します。最初の方法と同様に、さまざまな背景プロパティを使用して、画像を正しく設定します。次に、background-blend-mode プロパティを使用して、darken に設定します。

このようにして、background-blend-mode プロパティを使用して背景画像を暗くすることができます。

サンプルコード：

#background {
    background: rgba(0, 0, 0, 0.7) url('https://loremflickr.com/320/240');
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: darken;
}

<div id="background"></div>