CSS を使用して背景画像の上に半透明の色をオーバーレイするにはどうすればよいですか?

背景画像の上に半透明カラーをレイヤー

CSS を使用して背景画像の上に半透明カラー レイヤーをオーバーレイしようとしているときに問題が発生したとおっしゃいました。この効果を効果的に実現する方法を見てみましょう。

background-image と backing-color の両方を使用した最初のアプローチは技術的には正しいですが、background-color プロパティが背景画像をオーバーライドするため、望ましい結果が得られません。これを解決するには、次の代替案を検討できます。

background-image: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);
background-blend-mode: overlay;

background-blend-mode プロパティを使用すると、複数の背景レイヤーがどのように相互作用するかを指定できます。この場合、オーバーレイ ブレンド モードは背景画像に半透明の色を重ね合わせ、半透明のレイヤーを作成します。

CSS のみに依存するもう 1 つのアプローチは、box-shadow プロパティを利用することです。

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

内側の透明なボックス シャドウを指定すると、背景画像をオーバーレイする色付きレイヤーを効果的に作成できます。この手法には、追加の HTML 要素を必要とせず、純粋な CSS ソリューションであるという利点があります。

以上がCSS を使用して背景画像の上に半透明の色をオーバーレイするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。