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 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
前端面试必备之CSS3的新特性
Sep 05 HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
基于HTML5 FileSystem API的使用介绍
Apr 24 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 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
正则表达式语法
2006/10/09 Javascript
PHP网站提速三大“软”招
2006/10/09 PHP
php 获取全局变量的代码
2011/04/21 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
PHP读取Excel类文件
2017/05/15 PHP
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
Python入门篇之文件
2014/10/20 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
如何基于线程池提升request模块效率
2020/04/18 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
六十岁生日答谢词
2014/01/10 职场文书
写给女朋友的检讨书
2014/01/28 职场文书
百年校庆节目主持词
2014/03/27 职场文书
市场部经理岗位职责
2015/02/02 职场文书
初婚初育证明范本
2015/06/18 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
教你使用TensorFlow2识别验证码
2021/06/11 Python
Python上下文管理器Content Manager
2021/06/26 Python
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫