在圖像上的CSS顏色背景

Question

編輯：非常重要的事情，我忘了提及，我不能編輯基本的HTML，只有CSS。這是一個reddit樣式表。

我想要在圖像背景上具有半透明色彩背景作爲色調。以下是我已經試過： 這只是顯示圖像：

background: url(image) no-repeat, rgba(0,0,0,0.5); 

這顯示圖像，並打破了其縮放（背景尺寸：100％;）：

background: rgba(0,0,0,0.5), url(image) no-repeat; 

這使得背景全黑，與透明度衰落到任何的背後，而不是圖像：

background-image: url(image) no-repeat; 
background: rgba(0,0,0,0.5); 

這再次表明只是形象，並且打破了縮放：

background-image: url(image) no-repeat; 
background-color: rgba(0,0,0,0.5); 

這說明僅僅是圖像不打破縮放：

background: url(image) no-repeat; 
background-color: rgba(0,0,0,0.5); 

我嘗試使用@Trevan的回答，沒有運氣太：

#header:lang(dd) { 
    position: relative; 
    background: url(%%HexBackground%%) no-repeat; 
} 

#header:lang(dd)::before { 
    position: absolute; 
    content: ""; 
    top: 0; 
    left: 0; 
    background: rgba(0,0,0,0.5); 
} 

我可能這樣做雖然錯了。

Answer 1

CSS-只：box-shadow

見，而不必盒子陰影顯示在元件的外側這裏一個基本的例子http://jsfiddle.net/vyo168gg/1/

div { 
    width: 500px; 
    height: 300px; 
    background: url(image) no-repeat; 
    box-shadow: 0px 5000px 0px rgba(256, 0, 0, 0.5) inset; 
} 

基本上，我們把它放在裏面。

訣竅是讓第一個或第二個參數（？）大於元素寬度/高度，以便它重疊整個圖像。

Answer 2

這依賴於你想要做的（建議的jsfiddle）可能不太適用，但你應該看看SVG濾鏡：

http://www.html5rocks.com/en/tutorials/filters/understanding-css/

Answer 3

我可能會做的是使用定位僞元素絕對在具有背景的元素之上。

.example { 
    position: relative; 
    background: url(image) no-repeat; 
} 

.example::before { 
    position: absolute; 
    content: ""; 
    top: 0; 
    left: 0; 
    background: rgba(0,0,0,0.5); 
} 

Answer 4

覆蓋您的圖像上的div，也許是這樣的？

HTML

<div class="picContainer"> 
    <div class="picContainerTint"></div> 
    <img src="http://rdjpg.com/300/200"/> 
</div> 

CSS

.picContainer { 
    height: 200px; 
    width:300px; 
    position:relative; 
} 

.picContainerTint { 
    height: 100%; 
    width: 100%; 
    background: rgba(0,0,0,0.2); 
    position: absolute; 
    z-index:2; 
} 

JSFIDDLE

Answer 5

像這樣的事情？

我們在這裏做的是使用一個:after僞元素給你一個疊加的圖像色調沒有混淆DOM的預期效果。

到做這種方式的好處，而不是其他人

1. 你不插入顯示，只有元素到文檔中，保持它的內容集中（因爲它應該是！）
2. 這允許您將所有懸停元素與圖像保留在實際div上，而不需要引入不必要的複雜CSS選擇器。這實際上可以減慢你的網站，不管你是否相信
3. 沒有z-index問題的風險，因爲堆棧上下文保存在div本身內。這可能看起來很小，但如果您嘗試支持IE6或7，則可能是龐大的PITA。

享受！

.my-totally-cool-image-tint { 
 
    background-image: url(http://rawmultimedia.files.wordpress.com/2012/03/totally-cool-crazy-epic-2.jpg); 
 
    background-size: cover; 
 
    height: 400px; 
 
    width: 600px; 
 
    position: relative; 
 
} 
 
.my-totally-cool-image-tint:after { 
 
    content: ''; 
 
    position:absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: rgba(12, 218, 255, 0.5); 
 
    transition: 0.2s ease-out 0.5s; 
 
    opacity: 1; 
 
} 
 

 
.my-totally-cool-image-tint:hover:after { 
 
    opacity: 0; 
 
    transition: 1s ease-out; 
 
}

<div class="my-totally-cool-image-tint"> 
 
    
 
    </div>

Answer 6

你需要做的是分開的背景透明度。做類似下面應該工作：

HTML

<div class="background"> <div class="tint"></div> </div>

CSS

.background{ 
    background: url(image) no-repeat; 
    position: relative; 
} 
.tint{ 
    background: url(transparent-image); 
    height: 100%; 
    position: absolute; 
    width: 100%; 
} 

可以使用的着色，顏色和透明度，但不是所有的瀏覽器承認財產（IE8） 。