西西软件下载最安全的下载网站、值得信赖的软件下载站!

首页西西教程DreamWeaver → IE6\7\8浏览器支持RGBA半透明背景色的方法

IE6\7\8浏览器支持RGBA半透明背景色的方法

前往专题相关软件相关文章发表评论 来源:百度搜索时间:2012/11/5 10:54:51字体大小:A-A+

作者:西西点击:0次评论:0次标签: CSS

RGBA是CSS3中新增的属性,在RGB的基础上多了控制alpha透明度的参数。

介绍:R、G、B三个参数,正整数值的取值范围为:0 - 255,百分数值的取值范围为:0.0% - 100.0%(部分浏览器不支持使用百分数值)。超出范围的数值将被截至其最接近的取值极限。A参数,取值在0~1之间,不可为负值。

浏览器兼容性:IE9以下版本浏览器不支持。

ie浏览器支持RGBA半透明背景色的方法:

<!--[if IE]>
<style type="text/css">
.bg{
background:transparent;
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#4B7D0000,endColorstr=#4B7D0000);
}
</style>
<![endif]-->

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支持不太一样,不过唯一的不同是,firefox在border的拐角处会出现叠加,比如透明度是0.4,那么在Firefox中,四个角的透明度会变成0.8,而支持RGBa的非FF浏览器不会出现这种情况。

以上的css代码也可以写在css样式表中,当然需要css hack来支持,具体的css hack写法可以参照《css hack》一文。当然,实现HTML网页背景半透明的方法还有很多,比如通过PNG半透明图片实现,或者通过兼容性较好的css属性opacity实现,具体方法,可以参照《PNG 半透明》和《CSS Opacity》文章。

    相关评论

    阅读本文后您有什么感想? 已有人给出评价!

    • 8 喜欢喜欢
    • 3 顶
    • 1 难过难过
    • 5 囧
    • 3 围观围观
    • 2 无聊无聊

    热门评论

    最新评论

    发表评论 查看所有评论(0)

    昵称:
    表情: 高兴 可 汗 我不要 害羞 好 下下下 送花 屎 亲亲
    字数: 0/500 (您的评论需要经过审核才能显示)
    推荐文章

    没有数据

      没有数据