有一种设计是元素的背景图不固定,但前景文字需要清晰显示。这样文字就不能用固定的颜色,最好的方法是让文字透明。

为什么不用 opacicy/filter

一开始确实使用 opacity/filter 实现透明,不过在低版本ie下,文字变得很,不清楚原因。

现在的方案

首先保证现代浏览器完美的体验。
现代浏览器使用rgba控制透明度,不支持rgba的浏览器使用对应的固定颜色。

下面几行代码就能实现

1
2
3
4
border:1px solid #808080;
border:1px solid rgba(0,0,0,0.5);
color:#808080;
color:rgba(0,0,0,0.5);

支持rgba的浏览器会把固定色值的规则覆盖掉。

遇到的问题

ie7下,border可以实现想要的效果,color却不能,很神奇。(也许是解析出了问题?color最终是一个不能被识别的rgba值?)

解决方案

不得已用了hack解决这个问题,因为ie8中是正常的,所以针对ie7做了hack:

1
*color:#808080;