web-dev-qa-db-ja.com

rgbaの背景色で背景画像をオーバーレイする

background-imageのdivがあります。ユーザーがdivにカーソルを合わせたときに、背景画像をrgba色（rgba(0,0,0,0.1)）でオーバーレイします。

1 divのソリューション（つまり、複数のdiv、1つは画像用、もう1つは色用など）があるかどうか疑問に思っていました。

私は複数のことを試しました：

<div class="the-div" id="test-1"></div>
<div class="the-div" id="test-2"></div>
<div class="the-div" id="test-3"></div>

そしてこのCSS：

.the-div {
    background-image: url('the-image');
    margin: 10px;
    width: 200px;
    height: 80px;
}

#test-1:hover {
    background-color: rgba(0,0,0,0.1);
}

#test-2:hover {
    background: url('the-image'), rgba(0,0,0,0.1);
}

#test-3:hover {
    background: rgba(0,0,0,0.1);
}

this fiddle を参照してください。

私が見た唯一のオプションは、オーバーレイを使用して別の画像を作成し、JavaScriptを使用してプリロードしてから.the-div:hover { background: url('the-new-image'); }を使用することです。ただし、CSSのみのソリューション（すてきな; HTTP要求が少なく、ハードディスクが少ない）が欲しいです。何かありますか？

csscss3backgroundbackground-imagergba
50
Keelan

PeterVRのソリューションには、追加の色がHTMLブロック全体の上に表示されるという欠点があります。つまり、背景画像の上だけでなく、divコンテンツの上にも表示されます。 divが空の場合はこれで問題ありませんが、線形グラデーションを使用していない場合はより良い解決策になる可能性があります。

<div class="the-div">Red text</div>

<style type="text/css">
  .the-div
  {
    background-image: url("the-image.png");
    color: #f00;
    margin: 10px;
    width: 200px;
    height: 80px;
  }
  .the-div:hover
  {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1))), url("the-image.png");
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
  }
</style>

fiddle を参照してください。勾配の仕様が現在混乱しているのは残念です。 互換性テーブル を参照してください。上記のコードは、MSIE 9.0以前を除く、注目に値する市場シェアを持つ任意のブラウザーで動作するはずです。

Edit（2017年3月）：Webの状態は、今ではずっと乱雑ではなくなりました。したがって、linear-gradient（FirefoxおよびInternet Explorerでサポート）および-webkit-linear-gradient（Chrome、OperaおよびSafariでサポート）行で十分です。追加のプレフィックスバージョンは不要です。

48
Wladimir Palant

はい、これを行う方法があります。擬似要素afterを使用して、背景画像の上にブロックを配置できます。このようなもの： http://jsfiddle.net/Pevara/N2U6B/

:afterのc​​ssは次のようになります。

#the-div:hover:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
}

編集：
これを空でない要素に適用し、背景にオーバーレイを取得する場合は、要素に正のz-indexを適用し、負の要素を:after。このようなもの：

#the-div {
    ...
    z-index: 1;
}
#the-div:hover:after {
    ...
    z-index: -1;
}

更新されたフィドル： http://jsfiddle.net/N2U6B/255/

35
Pevara
/* Working method */
.tinted-image {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(https://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg);
    height: 1280px;
    width: 960px;
    background-size: cover;
}

.tinted-image p {
    color: #fff;
    padding: 100px;
  }
<div class="tinted-image">
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam distinctio, temporibus tempora a eveniet quas  qui veritatis sunt perferendis harum!</p>
  
</div>

ソース： https://css-tricks.com/tinted-images-multiple-backgrounds/

5
pgrono

理想的には、背景プロパティにより、 http://www.css3.info/preview/multiple-backgrounds/ で説明されている背景画像の階層化と同様に、さまざまな背景を階層化できます。残念ながら、少なくともChrome（40.0.2214.115）では、url（）画像の背景と一緒にrgbaの背景を追加すると、プロパティが壊れるようです。

私が見つけた解決策は、rgbaレイヤーを1px * 1px Base64エンコード画像としてレンダリングし、インライン化することです。

.the-div:hover {
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgkAQAABwAGkn5GOoAAAAASUVORK5CYII=), url("the-image.png");
}

base64でエンコードされた1 * 1ピクセルの画像の場合、私は http://px64.net/

これらの変更のjsfiddleを次に示します。 http://jsfiddle.net/325Ft/49/ （画像をインターネット上にまだ存在するものに交換しました）

3
RedEight

私は働くために次のものを得ました：

html {
  background:
      linear-gradient(rgba(0,184,255,0.45),rgba(0,184,255,0.45)),
      url('bgimage.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

上記は、素敵な不透明な青いオーバーレイを生成します。

0
guero64