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打造属于自己的“小黄人”
Mar 14 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 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统计文章排行示例
2014/03/04 PHP
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
php实现复制移动文件的方法
2015/07/29 PHP
PHP微信API接口类
2016/08/22 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
一端时间轮换的广告
2006/06/26 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
jquery选择器使用详解
2014/04/08 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
python中使用enumerate函数遍历元素实例
2014/06/16 Python
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
Python同时迭代多个序列的方法
2020/07/28 Python
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
Sql面试题
2013/03/20 面试题
国家助学金感谢信
2015/01/21 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
开学典礼校长致辞
2015/07/29 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python