CSS3中使用RGBA设置透明度的示例


Posted in HTML / CSS onAugust 04, 2015

说明:
RGBA(R,G,B,A)

取值:
R:红色值。正整数 | 百分数
G:绿色值。正整数 | 百分数
B:蓝色值。正整数 | 百分数
A:Alpha透明度。取值0~1之间。

下面是用rgba() 设置50%透明度的白色.
 

CSS Code复制内容到剪贴板
  1. p {   
  2.   color: rgba(255, 255, 255, 0.5);   
  3. }  

RGBA是RGB色彩模型的一个扩展。这个缩写词代表红绿蓝三原色的首字母,Alpha值代表颜色的透明度/不透明度。
RGBA色彩表示法的格式为::
 

CSS Code复制内容到剪贴板
  1. rgba(redgreenblue, alpha)  

前三个值(红绿蓝)的范围为0到255之间的整数或者0%到100%之间的百分数。这些值描述了红绿蓝三原色在预期色彩中的量。
如果你想设置纯红色,那么把red参数设置满,即255,绿,蓝设置0即可。
 

CSS Code复制内容到剪贴板
  1. background-color: rgba(255, 0, 0, 1);  

结果:

也可使用百分比:
 

CSS Code复制内容到剪贴板
  1. background-color: rgba(100%, 0%, 0%, 1);  

结果:

第四个值, alpha, 制定了色彩的透明度/不透明度,它的范围为0.0到1.0之间

下面的例子是设置50%透明度的黄色:

 

CSS Code复制内容到剪贴板
  1. color: rgba(255, 242, 0, 0.5);  

结果:
CSS3中使用RGBA设置透明度的示例

HTML / CSS 相关文章推荐
CSS3 box-sizing属性
Apr 17 HTML / CSS
CSS3——齿轮转动关键代码
May 02 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
让IE支持HTML5的方法
Dec 11 HTML / CSS
html5声频audio和视频video等新特性详细说明
Dec 26 HTML / CSS
html5清空画布方法(三种)
Oct 16 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 HTML / CSS
详解CSS中iconfont的使用
Aug 04 #HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 #HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 #HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 #HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 #HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 #HTML / CSS
CSS3中的content属性使用示例
Jul 20 #HTML / CSS
You might like
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
原生js实现放大镜
2017/02/20 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
用Python中的字典来处理索引统计的方法
2015/05/05 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
详解python中的hashlib模块的使用
2019/04/22 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
python中time tzset()函数实例用法
2021/02/18 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
人力资源专员自我评价怎么写
2013/09/19 职场文书
周年庆典邀请函范文
2014/01/24 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
抵押贷款承诺书
2014/05/30 职场文书
2015年读书月活动总结
2015/03/26 职场文书
通知书大全
2015/04/27 职场文书
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers
如何使用SQL Server语句创建表
2022/04/12 SQL Server