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+jq创作含苞待放的荷花
Feb 20 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 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设计模式中的工厂模式
2008/06/12 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
PHP文件操作实例总结
2016/09/27 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
Javascript String.replace的妙用
2009/09/08 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python监控主机是否存活并以邮件报警
2015/09/22 Python
详解python和matlab的优势与区别
2019/06/28 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
商务日语毕业生自荐信范文
2013/11/14 职场文书
高二生物教学反思
2014/01/27 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
统计员岗位职责范本
2015/04/14 职场文书
元旦晚会开场白
2015/05/29 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书