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 相关文章推荐
HTML5 CSS3给网站设计带来出色效果
Jul 16 HTML / CSS
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
实例教程 一款纯css3实现的数字统计游戏
Nov 10 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
深入探究HTML5的History API
Jul 09 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
css3新特性的应用示例分析
Mar 16 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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
PHP+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
php xml-rpc远程调用
2008/12/19 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
jquery中radio checked问题
2015/03/16 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
python实现词法分析器
2019/01/31 Python
Python @property使用方法解析
2019/09/17 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
django rest framework使用django-filter用法
2020/07/15 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
PHP面试题及答案二
2015/05/23 面试题
一道输出判断型Java面试题
2014/10/01 面试题
临床医师专业个人自我评价范文
2013/11/07 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
求职个人评价范文
2014/04/09 职场文书
《雪儿》教学反思
2014/04/17 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
十佳少年事迹材料
2014/12/25 职场文书
交通安全教育主题班会
2015/08/12 职场文书