有沒有與CSS3指定背景圖像半透明的方法？

我找到了background-color：rgba（），但是這隻能指定背景顏色的 alpha。是否有類似的背景圖片，當圖像使用CSS3 background-image（）指定？如果沒有純粹的CSS3解決方案，那麼最簡單的方法是什麼？有沒有與CSS3指定背景圖像半透明的方法？

2011-07-09 Phillip

我不認爲有這個選項..我通常只是使用PNG，並將其保存時，使其適當的透明度級別。 – prodigitalson

你可以添加一個div的唯一目的就是爲背景，並給它一個

opacity: 0.5;

然後有一個兄弟格包含定位在它上面的內容。

2011-07-09 02:49:02

只需在的頂部上使用背景色填充您的百分比rgba白色的容器。

即。

html { 
    background-image: url(blah.jpg); 
} 

body { 
    background-color: rgba(255,255,255,0.5); 
}

請注意，如果您需要在背景圖像上疊加其他元素的元素爲半透明這種技術將無法正常工作。

2011-07-09 02:54:56 ghoppe

由於'rgba（）'中的第四個參數定義了不透明度，所以您可能需要定義'background-color：rgb（...）'樣式上方的行，以便它可以在較舊的瀏覽器上工作 - http：// css -tricks.com/2151-rgba-browser-support/。 –

div.gallery { 
    background-image: url(...........); 
    filter :alpha(opacity=0.8); 
    opacity : .8; 
}

此元素的任何子元素都會繼承其不透明性，如果這是一個問題，請執行JD Parsons所說的。該篩選器屬性適用於IE。 [示例從CSS3視覺快速入門指南修改]

2011-07-09 03:05:44 Mark

回答