沒有包裝的圖像上的透明顏色

我想添加一個半透明的顏色層到一個div的背景圖像的頂部。我曾嘗試以下：沒有包裝的圖像上的透明顏色

background: url('myImage.jpg'), rgba(0,0,0,0.5);

而且

background-image:url('myImage.jpg'); 
background-color:rgba(0,0,0,0.5);

但在這兩種情況下，只是將圖像顯示出來。我知道我可以用這種顏色將這個div包裹在另一個div中，但是有什麼辦法可以在單個div中完成嗎？

來源

2012-11-05 Flynn

你的第一個版本似乎在Chrome中工作正常：http://jsfiddle.net/w8H8d /。但是，瀏覽器的支持仍然有點多餘：http://www.css3.info/preview/multiple-backgrounds/ – fordareh

@fordareh - 實際上，支持是相當不錯的，即使IE9支持它（其中，考慮到團隊的bizzarre選擇關於支持什麼，是令人印象深刻的）。 http://caniuse.com/#feat=multibackgrounds – Shauna

是的 - 我同意，這只是我沒有任何麻煩，看你的代碼在小提琴中。所以，我想你可能是在IE8中。但是，看起來你已經照顧好了。 – fordareh

使用:after選擇器。它可以解決你的問題。

.container:after { 
    content: ""; 
    display: block; 
    width: 300px; 
    height: 200px; 
    background-color:rgba(0,0,0,0.5); 
}

例子在這裏 - http://jsfiddle.net/ecYrS/2/

來源

2012-11-05 19:00:43

CSS不支持你本來想要做的 - 你需要在圖像上放置一個RGBa圖層。您基本上需要在背景圖片上放置一個半透明圖層，但CSS會在背景圖片上設置優先級，基本上會覆蓋任何背景顏色。

一個想法是你可以嘗試一個alpha透明的PNG，但我不是100％。

來源

2012-11-05 18:42:22 Fluidbyte

alpha-transperent PNG音效非常好！我將這種想法留待將來，謝謝。 –

只爲透明圖層提供額外請求？今天的風格太過分了，而且風格很糟糕 –

-1

你提到@Flynn面臨着同樣的問題。我想出了一個非常方便的解決方案。

雖然有一種方法！

我們可以使用漸變來代替使用rgba（）或hsla（）使用透明泛光顏色。漸變在技術上是背景圖像，因此不會受到堆疊順序中不能先到達（頂部）的規則的影響。

/* 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(image.jpg); 
 
}

瞭解更多信息，請瀏覽以下鏈接：

image with background color

來源

2016-04-19 10:09:24 Waqas

沒有包裝的圖像上的透明顏色

回答

相關問題