filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#FFAABBCC', endColorstr='#FFAABBCC');
DXImageTransform.Microsoft.gradient滤镜里的startColorstr参数值是#AARRGGBB形式的,其中的AA是代表不透明度的十六进制,00表示完全透明,FF就是全不透明,化成十进制的范围就是0~255,剩下的RRGGBB就是颜色的十六进制代码。例子中background: rgba(125, 0, 0, .3);表示的是30%不透明度的红色背景。如何把30%的不透明度转换成十六制呢?很简单,先计算#AA的的十进制x,x/255 = 3/10,解得x=3*255/10,然后再把x换算成十六进制,约等于4B。
RGBa颜色可以用于border,不过,不同的浏览器对于border的RGBa支持不太一样,不过唯一的不同是,FF在border的拐角处会出现叠加,比如透明度是0.4,那么在FF中,四个角的透明度会变成0.8,而支持RGBa的非FF浏览器不会出现这种情况。
参考:
RGBa色彩的浏览器支持
让IE支持RGBa的背景色
工具:CSS背景颜色属性值转换
Opacity兼容性
.opacity {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width:100%;
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity:0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity:0.5;
}
0 评论:
发表评论
注意:只有此博客的成员才能发布评论。