[解決済み] 背景画像にカラーオーバーレイを追加するには？重複

質問

この質問はSOでもWebでもよく見かけました。しかし、どれも私が探しているものではありませんでした。

CSSのみを使って背景画像にカラーオーバーレイを追加するにはどうすればよいですか？

HTMLの例です。

<div class="testclass">
</div>

CSSの例です。

.testclass {
    background-image: url("../img/img.jpg");
}

ご注意ください。

• つまり、カラーオーバーレイのための子 div を div "testclass" 内に追加したくないのです。

• これは、quot;hover effect"であってはならない。私は、単に背景画像にカラーオーバーレイを追加したいだけである。

• 私は、不透明度を使用できるようにしたい。すなわち、RGBAカラーを可能にするソリューションを探しています。

• 私は1色だけ、例えば黒を探しています。グラデーションではありません。

このようなことは可能でしょうか？(もし可能でなければ驚きですが、これに関する情報を見つけることができませんでした）また、可能であれば、これを達成する最善の方法は何ですか？

すべての提案とアドバイスに感謝します。

解決方法は？

簡単な方法が2つありますね。

• 画像の上に半透明の単一グラデーションがかかった複数の背景
• 巨大インセットシャドウ

グラデーションオプション。

html {
  min-height:100%;
  background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
}

shadow オプションを指定します。

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
  box-shadow:inset 0 0 0 2000px rgba(255, 0, 150, 0.3);
}

古い コードペン いくつかの例を挙げて説明します。

第三の選択肢

• background-blen-mode を含む :

  は background-blend-mode CSS プロパティは、要素の背景画像をどのように互いに、また要素の背景色とブレンドさせるかを設定します。

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2) rgba(255, 0, 150, 0.3);
  background-size:cover;
  background-blend-mode: multiply;
}