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 相关文章推荐
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 HTML / CSS
html5+css3之动画在webapp中的应用
Nov 21 HTML / CSS
HTML5 Canvas 起步(2) - 路径
May 12 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
Jun 16 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 HTML / CSS
HTML中meta标签及Keywords
Apr 15 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更新修改excel中的内容实例代码
2014/02/26 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
js实现分页功能
2017/05/24 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
Python利用IPython提高开发效率
2016/08/10 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
python Paramiko使用示例
2020/09/21 Python
python 下划线的不同用法
2020/10/24 Python
js实现弹框效果
2021/03/24 Javascript
乡镇办公室工作决心书
2014/03/11 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
个人工作总结范文2014
2014/11/07 职场文书
贷款承诺书
2015/01/20 职场文书
创先争优承诺书
2015/01/20 职场文书
观看建国大业观后感
2015/06/01 职场文书
Python 可迭代对象 iterable的具体使用
2021/08/07 Python
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers