透明背景，不透明元素

我想要body上的圖像背景和主要div上的半透明背景，以便可以通過它看到圖像，但是顯示爲陰影。然而，最簡單的透明背景，不透明元素

body { 
    background-image: ... 
} 

#main { 
    background-color: #999; 
    opacity: 0.9 
}

也將使內#main一切是不透明的爲好，如任何包含img。

你如何做我描述的？

感謝

來源

2011-10-26 Amadan

RGBA幫助你，但不是所有的瀏覽器都支持

用法：

rgba(a,b,c,d), where a = red(0-255); b = green(0-255); c = blue(0-255), d = alpha opacity(0-1)

，所以如果你想有一個50％的紅色背景，你應該使用

background：rgba（255,0,0,0.5）;

來源

2011-10-26 11:17:45 Sergiu

這是最乾淨的答案。爲了兼容一些舊瀏覽器，半透明PNG是一個很好的回退。 –

半透明PNG與舊IE版本有麻煩......但即使這個問題可以解決 – Sergiu

當然！/doh我並不太在意舊版瀏覽器，對於我所關心的他們都可以獲得單色背景。這導致我的下一個問題：如果我寫'color：#fee;顏色：rgba（240,240,255,0.5）'，它是否按照我認爲的那樣做？（ie IE6獲得單色'＃費用'，Chrome理解'rgba'覆蓋？我沒有IE6測試:) – Amadan

如果您創建一個半透明的PNG文件一對夫婦大的像素和色彩你以後再補充一點，作爲主要的背景圖像，你應該得到期望的結果。

來源

2011-10-26 09:20:27 ratpuddle

如果你可以使用CSS3爲你的項目，你可以使用RGBA（）

#main { 
    background-color: rgba(0, 0, 0, .5) 
}

的語法是RGBA（紅，綠，藍，alpha）。這會使#main的背景透明，但不會顯示內容。

這裏是提琴：http://jsfiddle.net/neilheinrich/FwxRX/

來源

2011-10-26 09:21:48 nheinrich

更新：添加小提琴。 – nheinrich

透明背景，不透明元素

回答

相關問題