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 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
基于HTML5 FileSystem API的使用介绍
Apr 24 HTML / CSS
HTML5实现预览本地图片
Feb 17 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 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也可以?成Shell Script
2006/10/09 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
php pdo操作数据库示例
2017/03/10 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
python实现读Excel写入.txt的方法
2018/04/29 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
Shell编程面试题
2016/05/29 面试题
南京导游词
2015/02/03 职场文书
通知格式
2015/04/27 职场文书