源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[CSS] RGBa色彩的浏览器支持分析

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2010-1-16 23:19:45 | 显示全部楼层 |阅读模式
RGBa色彩的浏览器支持分析小结,需要的朋友可以参考下。 RGBa是一种在CSS中声明包含透明效果的颜色的方法,它的语法是这样的

复制代码代码如下:
div {
background: rgba(200, 54, 54, 0.5);
}

它允许我们为元素添加透明色。或许我们习惯了使用”opacity“,它很简单易用,但是,opacity会使所有的子元素都变成透明的,而且很难去解决这个问题。(除非使用怪异的定位hack跨浏览器透明同样颇为棘手。

通过RGBa,我们可以将一个元素设置为透明,而不会影响其子元素:

声明一个保留颜色

并非所有的浏览器支持RGBa,所以如果允许的话,可以声明一个保留色彩。这个色彩应该是可靠的——所有的浏览器都支持。不声明就意味着,在不支持RGBa的浏览器里面,没有使用颜色。

复制代码代码如下:
div {
background: rgb(200, 54, 54); /* The Fallback */
background: rgba(200, 54, 54, 0.5);
}

不过,这条退路在某些古董级浏览器中依然无效。

RGBa的浏览器支持情况

浏览器,版本,操作系统 测试结果 退路
Firefox 3.0.5 (OS X, Windows XP, Vista) 支持
Firefox 2.0.0.18 (PC) 不支持 纯色
Safari 4 (Developer Preview, Mac) 支持
Safari 3.2.1 (PC) 支持
Mobile Safari (iPhone) 支持
Opera 9.6.1 不支持 纯色
IE 5.5 (PC via IETester) 不支持 无色
IE 6 (PC via IETester) 不支持 纯色
IE 7 不支持 纯色
IE 8 beta 2 不支持 纯色
Google Chrome 1.0.154.43 支持
Google Chrome 1.0.154.46 支持
Netscape 4.8 (PC) 不支持 没有颜色
SeaMonkey 1.1.14 不支持 无色
SeaMonkey 1.1.16 不支持 纯色
SeaMonkey 2.0 beta3 支持
Sunrise 1.7.5 支持
Stainless 0.2.5 支持
Flock 2.0.2 支持
BlackBerry Storm Browser 支持 纯色
Camino 1.6.6 不支持 纯色

上面的数据是通过测试demo得到的,该测试页面包含了更多更完整的浏览器兼容性列表。

对IE浏览器的更好的退路

因为IE浏览器支持条件注释,我们可以抛弃RGB并使用IE的一个私有CSS滤镜来实现同样的效果:

复制代码代码如下:
<!--[if IE]>
<style type="text/css">
.color-block {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
zoom: 1;
}
</style>
<![endif]-->

4月29日更新:

经过神飞测试发现,RGBa颜色可以用于border,不过,不同的浏览器对于border的RGBa支持不太一样,不过唯一的不同是,FF在border的拐角处会出现叠加,比如透明度是0.4,那么在FF中,四个角的透明度会变成0.8,而支持RGBa的非FF浏览器不会出现这种情况。

译自:css-tricks
回复

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-11-16 23:27:28 | 显示全部楼层
额UI废物iuhfujewfiewnnfen
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

155

积分

注册会员

Rank: 2

积分
155
发表于 2023-7-11 19:20:45 | 显示全部楼层
看看看看
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

155

积分

注册会员

Rank: 2

积分
155
发表于 2023-7-25 11:01:08 | 显示全部楼层
笑纳了老板
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

120

积分

注册会员

Rank: 2

积分
120
发表于 2024-7-20 03:24:05 | 显示全部楼层
哈哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

316

积分

中级会员

Rank: 3Rank: 3

积分
316
发表于 2024-9-5 02:22:00 | 显示全部楼层
撒旦撒旦撒擦擦擦擦
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

120

积分

注册会员

Rank: 2

积分
120
发表于 2024-9-9 20:30:41 | 显示全部楼层
天天源码社区www.tiantianym.com
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

262

积分

中级会员

Rank: 3Rank: 3

积分
262
发表于 2024-9-14 09:33:13 | 显示全部楼层
很不错的样子
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-9-26 07:28:45 | 显示全部楼层
撒旦撒旦撒擦擦擦擦
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-10-3 00:20:35 | 显示全部楼层
灌灌灌灌水
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-22 21:59 , Processed in 0.069623 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表