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实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
Aug 31 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
html5使用canvas绘制文字特效
Dec 15 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 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
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
javascript innerHTML使用分析
2010/12/03 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
详解vue组件基础
2018/05/04 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
让python json encode datetime类型
2010/12/28 Python
python 网络编程详解及简单实例
2017/04/25 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
Python数据可视化之画图
2019/01/15 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
Python Django搭建网站流程图解
2020/06/13 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
Python 求向量的余弦值操作
2021/03/04 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
迎接领导欢迎词
2014/01/11 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
运动会的口号
2014/06/09 职场文书
2015年人事科工作总结
2015/04/28 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书
试了下Golang实现try catch的方法
2021/07/01 Golang