RGBa色彩的浏览器支持

2024-02-27    分类: 网站建设

什么是RGBa?它是一种在CSS中声明包含透明效果的颜色的方法,它的语法是这样的:  div {    background: rgba(200, 54, 54, 0.5); }

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

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

声明一个保留颜色 并非所有的浏览器支持RGBa,所以如果允许的话,可以声明一个保留色彩。这个色彩应该是可靠的&mdash;—所有的浏览器都支持。不声明就意味着,在不支持RGBa的浏览器里面,没有使用颜色。  div {    background: rgb(200, 54, 54); /* The Fallback */    background: rgba(200, 54, 54, 0.5); }</code>

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

RGBa的浏览器支持情况 浏览器,版本,操作系统 测试结果 退路 Firefox 3.0+ 支持 —  Firefox 2.0- 不支持 纯色 webkit -safari 3.x+ 支持 —  webkit -safari 2.0- 不支持 – Mobile Safari (iPhone/iPod Touch /iPad) 支持 —  opera 10.x+ 支持 —  Opera 9.x- 不支持 纯色 IE 5.5 - 不支持 无色 IE 6-8 不支持 纯色 IE 9 支持 —  Google Chrome 所有版本 支持 —  Netscape 所有版本 不支持 没有颜色 SeaMonkey 1.1.x 不支持 无色 SeaMonkey 2.0 + 支持 —  BlackBerry Storm Browser 支持 –

上面的数据是通过测试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]-->

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

当前题目:RGBa色彩的浏览器支持
地址分享:/news24/319124.html

成都网站建设公司_创新互联,为您提供服务器托管面包屑导航网站营销关键词优化外贸建站移动网站建设

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都seo排名网站优化