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和jquery实现自定义checkbox和radiobox组件
Apr 22 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 HTML / CSS
使用phonegap检测网络状态的方法
Mar 30 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
html5开发三八女王节表白神器
Mar 07 HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 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 从数据库提取二进制图片的处理代码
2009/09/09 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
PHP实现合并discuz用户
2015/08/05 PHP
PHP7常量数组用法分析
2016/09/26 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
javascript中length属性的探索
2011/07/31 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
Python断言assert的用法代码解析
2018/02/03 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
python进行两个表格对比的方法
2018/06/27 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
Python range与enumerate函数区别解析
2020/02/28 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
社区庆中秋节活动方案
2014/02/07 职场文书
机关党员公开承诺书
2014/08/30 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL