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


Posted in HTML / CSS onApril 02, 2009

使用新的CSS3的”RGBA”声明,不仅仅让我们像通常一样设置RGB颜色,而且还可以设置其透明度。
使用新的CSS3的”RGBA”声明,不仅仅让我们像通常一样设置RGB颜色,而且还可以设置其透明度。
上一篇文章:CSS3教程(8):CSS3透明度指南
RGBA像RGB一样设置颜色,而这个”A”——RGBA中的最后一个值——允许我们设置该元素的透明度。就像opacity声明一样,一个opacity值为1的元素是完全不透明的,而一个opacity为0的元素是完全透明的。
浏览器兼容性
RGBA现在在Firefox、Google Chrome和Safari中都有比较好的支持,同样不需要前缀。 CSS3 RGBA 色彩
CSS3教程(9):设置RGB颜色
上面的效果有以下样式实现:
div.rgbaL1 { background:rgba(153, 134, 117, 0.2); height:20px; } div.rgbaL2 { background:rgba(153, 134, 117, 0.4); height:20px; } div.rgbaL3 { background:rgba(153, 134, 117, 0.6); height:20px; } div.rgbaL4 { background:rgba(153, 134, 117, 0.8); height:20px; } div.rgbaL5 { background:rgba(153, 134, 117, 1.0); height:20px; }
浏览器支持

  • Firefox(3.05 …)
  • Google Chrome(1.0.154 …)
  • Google Chrome(2.0.156 …)
  • Internet Explorer(IE7, IE8 RC1 )
  • Opera(9.6 …)
  • Safari(3.2.1 windows…)
HTML / CSS 相关文章推荐
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
CSS教程:CSS3圆角属性
Apr 02 #HTML / CSS
CSS3的新特性介绍
Oct 31 #HTML / CSS
CSS3属性选择符介绍
Oct 17 #HTML / CSS
CSS3教程:background-clip和background-origin
Oct 17 #HTML / CSS
细说CSS3中的选择符
Oct 17 #HTML / CSS
css3 给背景设置渐变色的方法
Sep 12 #HTML / CSS
css3中用animation的steps属性制作帧动画
Apr 25 #HTML / CSS
You might like
关于PHP中的Class的几点个人看法
2006/10/09 PHP
php+oracle 分页类
2006/10/09 PHP
php的控制语句
2006/10/09 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
取选中的radio的值
2010/01/11 Javascript
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
用python实现对比两张图片的不同
2018/02/05 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
Python操作Jira库常用方法解析
2020/04/10 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
好军嫂事迹材料
2014/01/15 职场文书
小学运动会口号
2014/06/07 职场文书
五一活动标语
2014/06/30 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android
浅谈如何保证Mysql主从一致
2022/03/13 MySQL