如何用CSS3實現類似Facebook的不透明效果？

我正試圖實現類似於Facebook用於其「評論」社交插件的CSS3不透明度。不透明度有一種像玻璃一樣的外觀，就好像你在透過窗戶看。如何用CSS3實現類似Facebook的不透明效果？

這裏是什麼，我指的是截圖：

enter image description here

來源

2011-08-08 Alexa Green

可以使拍攝畫面更大，所以我可以得到一個想法是什麼樣子內的背景DIV像... – samccone

@samccone - 你去了：http://bit.ly/ngIGnY –

這裏是一個跨瀏覽器解決方案

http://jsfiddle.net/3VbTC/2/

關鍵是要嵌套div容器

來源

2011-08-09 02:00:55 samccone

我會爲你+1這個答案，但我沒有註冊:( –

這非常聰明 – stephenmurdoch

int2rnetz sp33k – samccone

我會說要麼像這樣

.element 
{ 
    background-color: Black; 
    opacity: 0.2; 
}

或透明的背景圖像。

來源

2011-08-08 03:07:34

我不是一個不透明的粉絲，因爲它被它所應用的div內包含的所有內容所繼承。 RGBA好得多，但正如有人指出的那樣，它不是跨瀏覽器的（感謝我們特別的朋友IE）。如果你擔心所有這些，透明bkg圖片可能是最好的。 +1 – stephenmurdoch

可以做的另一種方式是使用相對位置的外部容器。然後放置一個空白背景div與不透明度設置和絕對位置填充容器，並設置一個低z指數。然後在外部容器中添加你不想透明的元素（單詞？）與絕對位置和更高的z-index。那可行。編輯：samccones答案基本上是我說的。它的工作非常好，並且像他說的那樣是跨瀏覽器。 –

將background（或background-color）屬性設置爲rgba(255,255,255,0.3)或類似。

來源

2011-08-08 03:10:09 foxy

這不是跨瀏覽器... – samccone

@samccone，這是CSS3標準的一部分。對於大多數Web應用程序來說，優雅的回退仍然可以使用戶使用網站的功能。我的意思是，沒有必要支持多年前發明的瀏覽器的強制性理由，例如IE6。 – foxy

但它是一個簡單的修復，爲什麼不支持它？ – samccone

如何用CSS3實現類似Facebook的不透明效果？

回答

相關問題