web-dev-qa-db-ja.com

背景画像にカラーオーバーレイを追加する方法は？

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

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

HTMLの例：

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

CSSの例：

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

ご注意ください：

  • CSSのみを使用してこれを解決したいです。つまり、カラーオーバーレイのdiv "testclass"内に子divを追加したくありません。

  • これは「ホバー効果」ではないはずです。背景画像に単に色重ねを追加したいだけです。

  • 不透明度を使用できるようにしたい、つまり、RGBAカラーを許可するソリューションを探しています。

  • 私は1色だけを探しています。黒としましょう。勾配ではありません。

これは可能ですか？ （そうでない場合は驚きますが、これについて何も見つけることができませんでした）、もしそうなら、これを達成する最良の方法は何ですか？

すべての提案やアドバイスを歓迎します！

cssbackground-imagebackground-color
43
Alex

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;
  }

シャドウオプション：

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);
  }

古い codepen 私のいくつかの例

3番目のオプション

  • with 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;
  }
106
G-Cyr

擬似要素を使用して、オーバーレイを作成できます。

.testclass {
  background-image: url("../img/img.jpg");
  position: relative;
}
.testclass:before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  background: rgba(0,0,0,.5);
}
25
Stickers

background-imageは複数の値を取ります。

そのため、1色の線形グラデーションとcss blend modesの組み合わせでうまくいきます。

.testclass {
    background-image: url("../images/image.jpg"), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
    background-blend-mode: overlay;
}

iE/EdgeではCSSブレンドモードのサポートがまったくないことに注意してください。

12
Uzi

これを試してください、それは簡単で明確です。私はここからそれを見つけました： https://css-tricks.com/tinted-images-multiple-backgrounds/

.tinted-image {

  width: 300px;
  height: 200px;

  background: 
    /* top, transparent red */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
}
3
Udara