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中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
May 28 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
使用phonegap获取位置信息的实现方法
Mar 31 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
CSS 制作波浪效果的思路
May 18 HTML / CSS
css弧边选项卡的项目实践
May 07 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常用正则表达式的整理汇总
2013/06/08 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
javascript 自动填写表单的实现方法
2010/04/09 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
水果花束:Fruit Bouquets
2017/12/20 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
安全教育感言
2014/03/04 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
党支部考察意见范文
2015/06/02 职场文书
初三英语教学反思
2016/02/15 职场文书
二年级作文之动物作文
2019/11/13 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js