背景色がrgbaの背景画像を重ねる

Question

divにはbackground-imageがあります。私は、ユーザーが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要求、少ないハードディスク）。何かありますか？

Answer 1

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を参照してください。グラデーションの仕様が現在混乱しているのは残念です。 compatibility tableを参照してください。上記のコードは、MSIE 9.0以降のものを除き、注目すべき市場シェアを持つブラウザで動作するはずです。

（2017年3月）編集：ウェブの状態は今のところはるかに厄介です。したがって、linear-gradient（FirefoxとInternet Explorerでサポートされています）と-webkit-linear-gradient（Chrome、Opera、Safariでサポートされています）行で十分です。追加の接頭辞付きバージョンはもはや必要ありません。

Answer 2

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

:afterためのCSSは次のようになります。

#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/

Answer 3

背景属性は、理想的には、http://www.css3.info/preview/multiple-backgrounds/に詳述されている背景画像のレイヤリングと同様に、様々な背景を重ねることができます。残念ながら、少なくともChrome（40.0.2214.115）では、url（）画像の背景にrgbaの背景を追加すると、そのプロパティが破損しているようです。

私が見つけた解決策は、rgbaレイヤを1px * 1px Base64でエンコードされたイメージとしてレンダリングし、それをインライン化することです。base64のため

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

私はここでhttp://px64.net/

を使用し1 * 1ピクセルの画像をエンコード作っこれらの変更であなたのjsfiddleです。 http://jsfiddle.net/325Ft/49/（私もまだ、インターネット上に存在するものに画像をスワップ）

Answer 4

/* 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/

Answer 5

私は仕事に以下を得ている：

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

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