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制作响应式导航菜单的方法
Jul 12 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
HTML5播放实现rtmp流直播
Jun 16 HTML / CSS
html form表单基础入门案例讲解
Jul 15 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 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
UCenter Home二次开发指南
2009/05/28 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
PHP时间函数使用详解
2019/03/21 PHP
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
利用vue.js插入dom节点的方法
2017/03/15 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
python对字典进行排序实例
2014/09/25 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
python操作文件的参数整理
2019/06/11 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
C#怎么让一个窗口居中显示?
2015/10/20 面试题
研讨会主持词
2014/04/02 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript