标签：
设计师为了突出网页的层次感，往往会采用一些半透明的元素，但对于前端实现起来可
不是那么简单,看下图两边的左右按钮
先看看众所周知的解决方案
如果我们想要一个半透明背景,有两种实现方式:
1、利用CSS和opacity属性
2、建立一个24位PNG背景图片
第一种利用opacity的问题除了 需要通过麻烦的语法来兼容所有浏览器, 还有不单该元素
自身背景透明了,它的子元素会继承opacity属性，也会透明. 所以里面所有的文字也是透
明的,这一般不是想要的效果. 你可以做一些CSS trick,通过建立额外的元素来解决这个
问题,但这种解决方案很恶心.
第二种，用PNG的问题是会额外增加HTTP请求, 而且图片比几行css代码要大得多- 尤其
考虑到图片不能太小以避免 IE下24位PNG图透明时引起的内存泄漏和IE6下灰色背景的
问题也是很常见的.
那么有没有更好的方案来实现呢，答案是必须的，就是用RGBa colors 就可以实现轻松
的背景透明
透明将只对背景生效,很好很强大,
但是IE是不支持RGBa的
幸运的是IE浏览器有一个渐变过滤器(the gradient filter), 我们只需要把开始结束都设
置成一个颜色就可以了. 你现在会想,”那我们怎么将其透明呢?”. 你只需要用16进制值
来定义颜色就可以了. 下面是用渐变过滤器实现和上面同等透明效果的代码:
你可以看到定义里的8位16进制数字, 前两位代表透明度,接下来两位是红色,接着就是绿
色和蓝色. 注意两位16进制颜色的范围是0~255(ff). 那我们怎么将0.6转化为16进制数
呢?
最快最好的方法就是Javascript来获取
最后的整合代码：
如果你添加后链接区域变小，可尝试添加*background:url(about:blank);来解决
标签：
原文地址：http://www.cnblogs.com/0621-barvo/p/4906747.html
