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属性box-shadow使用指南
Dec 09 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
Jul 10 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
浅析HTML5:'data-'属性的作用
Jan 23 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 HTML / CSS
纯html+css实现打字效果
Aug 02 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,不用COM,生成excel文件
2006/10/09 PHP
php UTF8 文件的签名问题
2009/10/30 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
详解Python开发中如何使用Hook技巧
2017/11/01 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
anaconda如何查看并管理python环境
2019/07/05 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
使用Python实现音频双通道分离
2020/12/25 Python
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
写给女朋友的道歉信
2014/01/12 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
销售活动策划方案
2014/08/26 职场文书
大学生简短的自我评价
2014/09/12 职场文书
基层党员对照检查材料
2014/09/24 职场文书
律师授权委托书范本
2014/10/07 职场文书
爱国电影观后感
2015/06/19 职场文书
医院病假条怎么写
2015/08/17 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript