兼容幾乎全部瀏覽器的透明背景效果

當今的大部分網頁設計都包含了半透明的元素.但用CSS實現想要的效果卻沒那麼簡單.

現存的問題

若是咱們想要一個半透明背景,有兩種實現方式:
– 利用CSS和opacity屬性
– 創建一個24位PNG背景圖片
用opacity的問題除了 須要經過麻煩的語法來兼容全部瀏覽器, 還有不單該元素自身背景透明瞭,它的子元素也會透明. 因此裏面全部的文字也是透明的,這通常不是想要的效果. 你能夠作一些CSS trick,經過創建額外的元素來解決這個問題,但這種解決方案很噁心.

用PNG的問題是會額外增長HTTP請求, 並且圖片比幾行css代碼要大得多- 尤爲考慮到圖片不能過小以免 IE下24位PNG圖透明時引發的內存泄漏.

解決方案

http://fancyoung.com/blog/css-background-transparency/