兼容几乎全部浏览器的透明背景效果

当今的大部分网页设计都包含了半透明的元素.但用CSS实现想要的效果却没那么简单.

现存的问题

若是咱们想要一个半透明背景,有两种实现方式:
– 利用CSS和opacity属性
– 创建一个24位PNG背景图片
用opacity的问题除了 须要经过麻烦的语法来兼容全部浏览器, 还有不单该元素自身背景透明了,它的子元素也会透明. 因此里面全部的文字也是透明的,这通常不是想要的效果. 你能够作一些CSS trick,经过创建额外的元素来解决这个问题,但这种解决方案很恶心.

用PNG的问题是会额外增长HTTP请求, 并且图片比几行css代码要大得多- 尤为考虑到图片不能过小以免 IE下24位PNG图透明时引发的内存泄漏.

解决方案

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