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实现表单验证效果(非常不错)
Jan 18 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
CSS3实现头像旋转效果
Mar 13 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
Jul 01 HTML / CSS
CSS的calc函数用法小结
Jun 25 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
php使用codebase生成随机数
2014/03/25 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
Python通过解析网页实现看报程序的方法
2014/08/04 Python
使用Python实现简单的服务器功能
2017/08/25 Python
Python中单例模式总结
2018/02/20 Python
python实现教务管理系统
2018/03/12 Python
python多线程http压力测试脚本
2019/06/25 Python
python 杀死自身进程的实现方法
2019/07/01 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
岗位职责的含义
2013/11/17 职场文书
学校办公室主任职责
2013/12/27 职场文书
音乐专业自荐信
2014/02/07 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
武夷山导游词
2015/02/03 职场文书
生日寿星公答谢词
2015/09/29 职场文书
三好学生竞选稿
2015/11/21 职场文书
python playwright之元素定位示例详解
2022/07/23 Python