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 08 HTML / CSS
详解CSS3 弹性布局快速入门
Jun 06 HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
一款基于css3的列表toggle特效实例教程
Jan 04 HTML / CSS
纯CSS3代码实现文字描边
Apr 25 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
Aug 17 HTML / CSS
amaze ui 的使用详细教程
Aug 19 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
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
php链表用法实例分析
2015/07/09 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
关于全局变量和局部变量的那些事
2013/01/11 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
Python的动态重新封装的教程
2015/04/11 Python
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
Django之form组件自动校验数据实现
2020/01/14 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
如何高效率的查找一个月以内的数据
2012/04/15 面试题
就业自我评价
2014/02/04 职场文书
抄作业检讨书
2014/02/17 职场文书
项目负责人岗位职责
2015/02/15 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书
学生会自荐信
2019/05/16 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
Python图片检索之以图搜图
2021/05/31 Python
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
python 单机五子棋对战游戏
2022/04/28 Python
SQL Server中搜索特定的对象
2022/05/25 SQL Server