CSS で画像を色でオーバーレイ

1. CSS で背景画像を色で rgba() 関数を使用してオーバーレイする
2. CSS のグラデーションで linear-gradient 関数を使用して背景画像をオーバーレイする
3. CSS のグラデーションで background-blend-mode プロパティを使用して背景画像をオーバーレイする

この記事では、CSS で画像を色でオーバーレイするいくつかの方法を紹介します。

CSS で背景画像を色で rgba() 関数を使用してオーバーレイする

rgba() 関数を使用して、画像上にカラーオーバーレイを作成できます。この関数は、background プロパティの値として使用できます。

rgba() 関数の構文は次のようになります。

rgba(red, green, blue, opacity);

ここでは、赤、緑、青の色が 0-255 の値と 0-1 の範囲の不透明度に設定されています。不透明度の値が 0 に設定されている場合は完全に透明になり、不透明度の値が 1 に設定されている場合は完全に不透明になります。

画像の上に色を追加して不透明度を下げるだけで、オーバーレイを作成できます。

たとえば、div タグを作成し、それに main という ID を付けます。次に、ヘッダー内に div を作成し、クラス overlay を指定します。

次に、段落 p を作成し、テキストを入力します。CSS で、背景画像を main id に設定し、background: url("") no-repeat fixed にします。

background-repeat プロパティは no-repeat であり、background-position プロパティは fixed です。次に、div に 100%の高さを指定して、コンテンツに応じて高さを調整します。

オーバーフロープロパティを hidden に設定して、コンテナからオーバーフローするコンテンツを非表示にします。また、テキストをより見やすくするために、色を白に設定します。

最後に、position プロパティを absolute に設定します。

次に、overplaydiv をスタイリングしてオーバーレイを作成する必要があります。background: rgba(50, 70, 80, 0.7); のように、不透明度とともに背景色を付けます。

親要素の高さに一致するように、height プロパティを 100%に設定します。上記のように、div の overflow プロパティを hidden に設定します。

次の例は、クラス名が overlay の div が maindiv の上に表示されることを示しています。div の背景色は透明なので、背景画像が表示されます。

サンプルコード：

<div id="main">
 <div class="overlay">
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 </p>
 </div>
</div>

#main {
 background: url("/img/DelftStack/logo.png") no-repeat fixed;
 height: 100%;
 overflow: hidden;
 color: #FFFFFF;
 position: absolute;
}

.overlay {
 background: rgba(50, 70, 80, 0.7);
 overflow: hidden;
 height: 100%;
}

CSS のグラデーションで linear-gradient 関数を使用して背景画像をオーバーレイする

線形グラデーションは、直線に沿った 2つ以上の色の間の漸進的な遷移のカラフルな画像を作成する CSS 関数です。カラフルなパターンを作成するために、さまざまな色とさまざまな方向が混ざっています。

linear-gradient を背景色として使用でき、画像オーバーレイとしても使用できます。ただし、画像オーバーレイとして使用するには、背景画像と一緒に使用する必要があります。

背景画像を表示するには、不透明度の低い色を線形グラデーションにする必要があります。

linear-gradient 関数の最初のパラメーターは、勾配の方向です。その後、必要に応じてカラーストップを指定できます。

たとえば、ID が main の div を作成します。CS で ID を選択し、コンテナの高さと幅を 100vh と 100%に設定します。

次に、background 省略形プロパティを使用して線形グラデーションと背景画像を設定します。linear-gradient プロパティを記述し、最初のパラメータとして to right 方向を使用します。

次に、rgba() 関数を使用してグラデーションを指定します。rgba(50, 70, 80, 0.7) を最初のカラーストップとして書き込み、rgba(30, 20, 150, 0.7) を 2 番目のカラーストップとして追加します。

linear-gradient 関数の後で、url() を使用して画像を挿入し、背景画像の no-repeat および fixed オプションを使用します。

ここでは、linear-gradient で 2つの色を使用し、各色の opacity は 0.7 です。linear-gradient 内の to right 値は、色のパターンまたは方向を示します。

これは、コンテナの左側に rgba(50, 70, 80, 0.7) の色が含まれており、右に移動すると徐々に色が rgba(30, 20, 150, 0.7) に変わることを意味します。

次の例は、linear-gradient が画像オーバーレイを提供することを示しています。これには、linear-gradient で使用される色の透明度により、左から右に移動する 2つの異なる色が含まれます。

サンプルコード：

<div id="main">
</div>

#main {
 height: 100vh;
 width: 100%;
 background: linear-gradient(to right, rgba(50, 70, 80, 0.7), rgba(30, 20, 150, 0.7)), url("/img/DelftStack/logo.png") no-repeat fixed;
}

CSS のグラデーションで background-blend-mode プロパティを使用して背景画像をオーバーレイする

background-blend-mode プロパティは、要素の背景画像を要素の背景色とブレンドする方法を設定します。プロパティは、lighten、darken、multiply、saturation、overlay、soft-light、color-dodge、hard-light などの値を取ります。

background-blend-mode プロパティは、background-color と background-image をブレンドします。background-blend-mode プロパティのデフォルト値は normal です。

このプロパティを使用して、背景画像にオーバーレイを提供できます。背景画像を設定した後、background-blend-mode プロパティを使用できます。

たとえば、HTML で div を作成します。CSS では、url() 関数を使用して背景画像を設定し、background プロパティで no-repeat と fixed の値を設定します。

次に、div の高さを 100vh に設定します。overflow プロパティに hidden 値を適用します。

同様に、background-color プロパティに値 rgba(50, 70, 80, 0.7) を設定します。最後に、background-blend-mode を使用し、その値を soft-light に設定して、背景画像にオーバーレイ効果を追加します。

サンプルコード：

<div id="main">
</div>

 #main {
 background: url("/img/DelftStack/logo.png") no-repeat fixed;
 height: 100vh;
 overflow: hidden;
 background-color: rgba(50, 70, 80, 0.7);
 background-blend-mode: soft-light;
}