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对图片照片进行边缘模糊处理的实现
Aug 08 HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 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中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
在Django中创建动态视图的教程
2015/07/15 Python
Python 基础之字符串string详解及实例
2017/04/01 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
Python&&GDAL实现NDVI的计算方式
2020/01/09 Python
Python 实现一个计时器
2020/07/28 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
高中军训感言1000字
2014/03/01 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
小平小道观后感
2015/06/09 职场文书
详解redis在微服务领域的贡献
2021/10/16 Redis
javascript的var与let,const之间的区别详解
2022/02/18 Javascript
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python