响应式设计-颜色透明度篇

在响应式设计中,我们需要面对的一个问题就是颜色在各个浏览器下的不同效果,这个不同不是颜色色值的不同,关键在透明度上面。
我们都知道 css 中的rgba 是一大福音,我们不需要用 png24 模仿那些忧报琵琶半遮面的效果(毛~玻璃),听上去很美。
但是,我们的响应式不仅要支持那些高富帅的浏览器,屌丝们使用的 IE8\IE7\IE6 也必须保证他们的效果。IE8 及以下的浏览器虽然不支持RGBA中的a,但是他们会识别RGB,这样我们通过纯色透明的方式的一些视觉效果就死翘翘了,原始的颜色裸在了沙滩上。
我们如何解决呢?
首先我们想到的是 HACK,这是Builder感觉最爽的,那种让IE浏览器臣服的感觉何止一个爽字,由于俺本身研究的不深入,也就是对 * 和 _ 有了解,但是IE8咋搞?

<div style="width:100px;height:100px;background:rgba(102,204,0,0.6);background:rgb(163,224,102)\0;*background:rgb(163,224,102);">
</div>

从上面的代码我们看到IE8得到了我们想要的颜色,我们使用了 \0 的hack,这样我们就解决了IE8的问题,只是……我们还要继续重置 IE7 及以下。
我们知道颜色的表示有 十六进制的(如:#FFF,#303030),还有三原色的 RGB(rgb(255,255,255));还有吗?确实还有,那就是HSL(Hue,Saturation,Lightness),就是色相、饱和度、亮度。我们可以查看一下浏览器关于对这种颜色表示方式的支持方式,答案是下面的样子:

  • Firefox 3.05+
  • Google Chrome 1.0.154+
  • Opera 9.6 +
  • Safari 3.2.1 +
  • Internet Explorer 8-

是不是有答案了?IE8以上的颜色我们可以使用HSL的表达方式,那么IE8及以下就用rgb或者16进制吧!我想答案是可以的

<div style="width:100px;height:100px;background:rgb(163,224,102);background:hsla(90,100%,40%,0.6);">
</div>

这样我们就解决了IE8下颜色透明的问题。