兼容几乎所有浏览器的透明背景效果

2019独角兽企业重金招聘Python工程师标准>>>

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

现存的问题

如果我们想要一个半透明背景,有两种实现方式:
– 利用CSS和opacity属性
– 建立一个24位PNG背景图片
用opacity的问题除了 需要通过麻烦的语法来兼容所有浏览器, 还有不单该元素自身背景透明了,它的子元素也会透明. 所以里面所有的文字也是透明的,这一般不是想要的效果. 你可以做一些CSS trick,通过建立额外的元素来解决这个问题,但这种解决方案很恶心.

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

解决方案

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

转载于:https://my.oschina.net/u/1446867/blog/232726