这个属性的兼容问题比较简单,IE8已经支持这个属性,IE6和IE7也可以通过hack支持。RGBA和CSS2里的RBG属性差不多,只是RGBA属性多了一个透明度的定义,CSS3标准里对RGBA属性的解释如下:

1 2 3 4 5
/* 基本语法 */em { color: Rgba(red,green,blue,opacity) }/* 举例 */em { color: rgba(255,0,0,1) } /* 红色,不透明 */em { color: rgba(100%,0%,0%,1) } /* 同上 */

在现实中,使用三个1~255的十进制数值去定义一个颜色比用百分比更加准确,下面是几个颜色的RGB数值,大家在使用的时候只需要把00~FF的16进制数值换算成十进制就行了。


如何使用RGBA属性

RGBA的强大之处在于,通过对透明度的定义和不同层的颜色混合可以呈现出更多的颜色,就像颜料的混合一样。举一个例子,我们先为页面设置一个背景图片,接着为页面里的H1里的内容设置一个颜色,例如:

1 2 3 4
h1 {color: rgb(0, 0, 0);background-color: rgb(255, 255, 255);}

效果如下:

这里可以看到H1并没有透明效果

但如果我没对H1设置一个整体的透明度(opacity属性)的话,效果会变成怎样呢?

1 2 3 4 5
h1 {color: rgb(0, 0, 0);background-color: rgb(255, 255, 255);opacity: 0.5;}


在这里我们看到的效果是整个H1包括文字都呈现50%的透明度。可是文字透明是影响阅读的,我们用RGBA属性单独设置H1的背景色试试。

1 2 3 4
h1 {color: rgb(0, 0, 0);background-color: rgba(255, 255, 255, 0.5);}


这是我们可以看到H1的背景成50%透明的白色,但里面的文字还是不透明的黑色。当然,你也可以只让H1里的文字透明。

1 2 3 4
h1 {color: rgba(0, 0, 0, 0.5);background-color: rgb(255, 255, 255);}


只让文字透明,可以用来创建剪纸效果。

更多用法

在任何需要设置颜色的地方都可以使用RGBA,例如:

1 2 3 4 5
div {color: rgb(0, 0, 0);background-color: rgb(255, 255, 255);border: 10px solid rgba(255, 255, 255, 0.3);}


为所有div设置透明度为30%线宽为10px的白色实线边界。

1 2 3 4 5 6 7 8
div {color: rgba(255, 255, 255, 0.8);background-color: rgba(142, 213, 87, 0.3);}div:hover {color: rgba(255, 255, 255, 1);background-color: rgba(142, 213,87, 0.6);}


鼠标滑过改变透明度。

另外如果和JavaScript配合的话,RGBA属性可以创造出更加炫目的效果。


改变你的CSS编写习惯

在以上的例子中你可以看到作者一直在使用rgb()去指定颜色,而不使用传统的#xxx形式的十六进制表示方法。这是一个为CSS3的RGBA属性准备的写法,用rgb()指定颜色可以理解为rgba()不透明,但两者的差别非常小,这会对将来升级到rgba()带来很大的方便。


兼容所有浏览器

虽然目前主流浏览器的最新版本都已经支持RGBA属性,但我们还必须照顾使用旧版浏览器的用户,因此在某些地方我们用老方法会保险一些。方法也有好几种,大家按需选择。

1.低版本不使用RGBA属性

虽然这会影响在低版本浏览器里的效果,但这是最简单的方法,也是最保险的方法,具体操作如下:

1 2 3 4
h1 {color: rgb(127, 127, 127);color: rgba(0, 0, 0, 0.5);}

先设置rgb颜色在设置rgba颜色,这样不支持rgba属性的浏览器只会显示rgb颜色,而支持rgba的浏览器因为重定义的作用会显示rgba颜色。

2.使用透明的PNG图片做背景

PNG格式的优点在于图片里的透明特性可以在网页里呈现出来,这里就用到了这个特点。

1 2 3 4
h1 {background: transparent url(black50.png);background: rgba(0, 0, 0, 0.5) none;}

通过透明度为50%的PNG背景达到了和rgba一样的效果。

3.IE hack

对IE6和IE7可以用IE的私用属性来解决,可达到部分和rgba一样的效果。

1 2 3
h1 {filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#80000000', EndColorStr='#80000000');}

我们需要留意的是StartColorStr和EndColorStr的值,前两位是十六进制的透明度,后面六位是十六进制的颜色。

CSS3 RGBA 属性高级用法的更多相关文章

  1. css3——border-image属性的用法

    项目需求是实现鼠标移到按钮上时,下方显示一张渐变的三角图片,于是想到使用border-image来实现. 实现;//向外偏移10px,可使边框内部的内容不是那么紧凑border-image-repea ...

  2. CSS3常用属性及用法

    1.transition: 过渡属性,可以替代flash和javascript的效果 兼容性:Internet Explorer 9 以及更早的版本,不支持 transition 属性. Chrome ...

  3. CSS3那些不为人知的高级属性

    尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius.box-shadow或者transform等.它们有良好的文档 ...

  4. CSS3动画属性animation的用法

    转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...

  5. 制作透明色:《CSS3 RGBA》与Opacity样式用法

    前面我们一起探讨了一下CSS3 Gradient(css3 渐变),今天我们一起来探讨一下CSS3中的RGBA.RGB对于大家来说一点不陌生,他就是红色R+绿色G+蓝色B,那现在我们所说的RGBA又是 ...

  6. Newtonsoft.Json高级用法 1.忽略某些属性 2.默认值的处理 3.空值的处理 4.支持非公共成员 5.日期处理 6.自定义序列化的字段名称

    手机端应用讲究速度快,体验好.刚好手头上的一个项目服务端接口有性能问题,需要进行优化.在接口多次修改中,实体添加了很多字段用于中间计算或者存储,然后最终用Newtonsoft.Json进行序列化返回数 ...

  7. Android(java)学习笔记264:Android下的属性动画高级用法(Property Animation)

    1. 大家好,在上一篇文章当中,我们学习了Android属性动画的基本用法,当然也是最常用的一些用法,这些用法足以覆盖我们平时大多情况下的动画需求了.但是,正如上篇文章当中所说到的,属性动画对补间动画 ...

  8. Android属性动画完全解析(中),ValueAnimator和ObjectAnimator的高级用法

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/43536355 大家好,在上一篇文章当中,我们学习了Android属性动画的基本用法 ...

  9. Android(java)学习笔记208:Android下的属性动画高级用法(Property Animation)

    1. 大家好,在上一篇文章当中,我们学习了Android属性动画的基本用法,当然也是最常用的一些用法,这些用法足以覆盖我们平时大多情况下的动画需求了.但是,正如上篇文章当中所说到的,属性动画对补间动画 ...

随机推荐

  1. C#LeetCode刷题之#697-数组的度( Degree of an Array)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3738 访问. 给定一个非空且只包含非负数的整数数组 nums, ...

  2. 聊聊mysql中的int(1)

    昨天有个读者问了我这样一个问题在mysql中建表的时候,我设置一个字段为int类型,长度为1,但是我发现这个字段却可以存储任意长度的数字,这是什么情况?这个问题在我刚接触数据库的时候也遇到过,我觉得有 ...

  3. VS Code 黑宝书背后的故事

    自开售以来,<Visual Studio Code 权威指南>就受到了许多读者朋友的青睐.在京东和当当两大平台上,都分别取得了不错的绩: 当当:计算机新书热卖榜第一名 京东:科技IT新书榜 ...

  4. Django context must be a dict ranther than Context

    1.1 错误描述 TypeError at /time/ context must be a dict rather than Context. Request Method: GET Request ...

  5. 微信小程序内置组件web-view的缓存问题探讨

    前言:博客或者论坛上面,还有自习亲身经历,发现微信小程序的webview组件的页面缓存问题相当严重,对开发H5的小童鞋来说应该困扰了不少.很多小童鞋硬是抓破脑袋也没有办法解决这个问题,那我们今天就来探 ...

  6. puppeteer去掉同源策略及请求拦截

    puppeteer是一个功能强大的工具,在自动化测试和爬虫方面应用广泛,这里谈一下如何在puppeteer中关掉同源策略和进行请求拦截. 同源策略 同源策略为web 安全提供了有力的保障,但是有时候我 ...

  7. Dubbo系列之 (五)服务订阅(2)

    辅助链接 Dubbo系列之 (一)SPI扩展 Dubbo系列之 (二)Registry注册中心-注册(1) Dubbo系列之 (三)Registry注册中心-注册(2) Dubbo系列之 (四)服务订 ...

  8. Linux 资源监控与性能测试

    综合管理 glances 系统情况监控 vmstat 能看到上下文切换,runnable进程个数,uninterrupted进程个数 磁盘IO iostat是磁盘级别监控,iotop进程级别监控,注意 ...

  9. Vue H5拖拽实例

    需求:需要把左侧的数据表,拖拽到右侧的表关联区域 左侧数据表HTML: <h3 class="data-block">数据表</h3> <a-inpu ...

  10. 真是没想到 Springboot + Flowable 工作流开发会这么简单

    本文收录在个人博客:www.chengxy-nds.top,技术资料共享,同进步 程序员是块砖,哪里需要哪里搬 公司内部的OA系统最近要升级改造,由于人手不够就把我借调过去了,但说真的我还没做过这方面 ...