`

CSS实现透明效果颜色的方法:RGBa

 
阅读更多

RGBa是一种在CSS中声明包含透明效果的颜色的方法,它的语法是这样的:

 

1
2
3
div {
   background: rgba(200, 54, 54, 0.5);
}

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

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

声明一个保留颜色

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

1
2
3
4
div {
   background: rgb(200, 54, 54); /* The Fallback */
   background: rgba(200, 54, 54, 0.5);
}</code>

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

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滤镜来实现同样的效果:

1
2
3
4
5
6
7
8
9
<!--[if IE]>
   <style type="text/css">
   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
       zoom: 1;
    } 
    </style>
<![endif]-->
分享到:
评论

相关推荐

    CSS通过RGBa将一个元素设置为透明效果

    RGBa是一种在CSS中声明包含透明效果的颜色的方法,它的语法是这样的: 复制代码代码如下: div { background: rgba(200, 54, 54, 0.5); } 它允许我们为元素添加透明色。或许我们习惯了使用”opacity“,它很简单...

    CSS3中使用RGBA设置透明度的示例

    说明:RGBA(R,G,B,A) 取值:R:红色值。...这个缩写词代表红绿蓝三原色的首字母,Alpha值代表颜色的透明度/不透明度。RGBA色彩表示法的格式为::  CSS Code复制内容到剪贴板 rgba(red, green, b

    CSS3实现网页立体导航

    /*设置字体向x轴偏移1px y轴偏移6px 阴影模糊半径为3px 设置rgb颜色值以及半透明效果*/ list-style: none outside none; } .nav li:after{ content: ""; position: absolute; top: 20px;...

    CSS3颜色值RGBA与渐变色使用介绍

    CSS3之前渐变色图片只能用背景图片 CSS3的渐变色语法可以让我们省去下载图片的开销 并且在改变浏览器分辨率时有更好的效果 颜色值RGBA 我们熟悉的rgb颜色标准,是由r(red)...例子2、使用rgba 红色半透明效果 .demo {

    Css如何实现背景色透明或半透明但内容不透明

    1.针对IE浏览器 复制代码代码如下: .demo{ background-color:transparent; filter:progid:DXImageTransform.Microsoft.gradient...–字体颜色–&gt; background-color:rgba(255,255,255,0.15)&lt;!–最后一个参数设置透

    纯css实现背景图片半透明内容不透明的方法

    还有就是设置background-color:rgba(),这种方式只能设置背景颜色的透明度。 正确姿势 我想到两个方法,第一个就是利用伪元素::before,我们通过给伪元素添加背景并且将伪元素的设置伪元素的背景透明度来实现 &lt;!...

    CSS3基础(RGBa、text-shadow、box-shadow、border-radius)

    RGBa前三个值是RGB色值,最后一个值是十进制的alpha不透明度值(0=透明,1=不透明)CSS 3 RGBa实现半透明背景RBGa可以用于任何更颜色相关的属性,例如字体颜色、边框颜色、背景颜色、阴影颜色等。RGBa可以应用在所有...

    myCss:基于 vuepress 搭建的教程类网站,内容以 css + demo 为主。目前主要为 css 揭秘 阅读笔记,30秒理解的 css 翻译

    透明颜色可使用 rgba 或 hsla 通过 background-clip 修改背景裁剪位置,默认是 border-box。 border: 10px solid hsla(0, 0%, 100%, 0.5); background-clip: padding-box; 随书相关链接 规范 CSS 值与单位 CSS 文本...

    CSS3教程(9):设置RGB颜色

    网页制作Webjx文章简介:使用新的CSS3的”RGBA”声明,不仅仅让我们像通常一样设置RGB颜色,而且还可以设置其透明度。 使用新的CSS3的”RGBA”声明,不仅仅让我们像通常一样设置RGB颜色,而且还可以设置其透明度。

    CSS3 透明色 RGBA使用介绍

    RGB对于大家来说一点不陌生,他就是红色R+绿色G+蓝色B,那现在我们所说的RGBA又是什么呢?说得简单一点就是在RGB的基础上加进了一个通道Alpha。从而形成了我们今天需要讨论的RGBA。如果需要更详细的解说,大家就跟着...

    浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color

    -webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad)。...要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色。想要禁用这个高亮,设置颜色的alpha值为0...css3中-webkit-text-size-adjust详解

    rgba的ie浏览器支持换算器

    实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性。 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及CSS3中的rgba属性之间进行十六进制与十进制的换算...

    css3系列教程(RGBA).rar

    使用新的css3的”RGBA”声明,不仅仅让我们像通常一样设置RGB颜色,而且还可以设置其透明度。

    CSS3中使用RGBa来调节透明度的教程

    其实,在 CSS3 中还有另外一套颜色透明解决方案 —— RGBa 。相对于 opacity ,RGBa 可以在单个元素上设置透明度,而不影响其子元素,只是 RGBa 的浏览器支持度并没有 opacity 的广泛,因此相对较少引起开发者注意。...

    RGBa色彩的浏览器支持分析

    RGBa是一种在CSS中声明包含透明效果的颜色的方法,它的语法是这样的 复制代码代码如下:div { background: rgba(200, 54, 54, 0.5);} 它允许我们为元素添加透明色。或许我们习惯了使用”opacity“,它很简单易用,...

    css入门笔记

    大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式(就近原则) 3.内联样式 4.!important; 绝对优先使用() 格式 p{ color:red !important; } 2.css选择器 1.选择器的作用 规范...

    postcss-gradient-transparency-fix:PostCSS插件,可针对较旧的浏览器透明地修复CSS渐变

    黑暗的原因是CSS关键字transparent实际上是rgba(0, 0, 0, 0)的别名—即完全透明的black 。 像linear-gradient(red, transparent)这样的简单定义不仅可以使颜色从完全不透明变为完全透明,还可以同时从红色变为黑色...

Global site tag (gtag.js) - Google Analytics