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实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 HTML / CSS
HTML基本元素标签介绍
Feb 28 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
smtp邮件发送一例
2006/10/09 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
深入理解Python 代码优化详解
2014/10/27 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
python修改字典内key对应值的方法
2015/07/11 Python
Python操作Excel之xlsx文件
2017/03/24 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
主持人婚宴答谢词
2014/01/28 职场文书
社区母亲节活动方案
2014/03/05 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
文明社区申报材料
2014/08/21 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android