在rgba之前，我们应该知道rgb。它就是红色R+绿色G+蓝色B。那rgba是什么？简单的说就是在rgb的基础之上加上一个通道alpha。他的语法如下：

  • r    红色值。正整数(0~255) | 百分数
  • g   绿色值。正整数 (0~255)| 百分数
  • b   蓝色值。正整数 (0~255)| 百分数
  • a   透明度。取值0~1之间

这里只是进行简单的认识。

从图中可以看到圈出的部分就是a（透明度）为0.3时的效果。

这个是为1时的效果。

关于css3的rgba的更多相关文章

  1. 使用IE滤镜实现css3中rgba让背景色透明的效果

    让背景透明,听上去不是挺容易的么? 让背景色透明,很容易想到opacity,要兼容IE的话只要加上filter:alpha(opacity=?)就行了,OK,看看这个例子. html: <div ...

  2. CSS3 之 RGBa 可透明颜色

    在 CSS3 中,增加了一个 opacity 属性,允许开发者设置元素的透明度,现在 opacity 已被主流的现代浏览器支持,但 opacity 会把被设置的元素及其子元素同时设置为同一个透明度,这 ...

  3. CSS3：RGBA的使用方法

    1.说明 此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度. RGBA(R,G,B,A) 2.取值 R: 红色值,正整数值的取值范围为:0 - 255,百分数值的取值范围为:0.0% ...

  4. Css3颜色值RGBA得表示方式

    RGBA(R,G,B,A) 取值 R:红色值.正整数 | 百分数 G:绿色值.正整数 | 百分数 B:蓝色值.正整数 | 百分数 A:Alpha透明度.取值0~1之间. 说明: RGBA记法. 此色彩 ...

  5. css3整理--rgba

    rgba语法: rgba(0, 0, 0,0.5); 第一个参数:R 红色(0-255) 第二个参数:G 绿色(0-255) 第三个参数:B 蓝色(0-255) 第四个参数:透明度(0-1)使用rgb ...

  6. 【CSS3】rgba与opacity

    RGBA 语法 R:红色值.正整数 | 百分数 G:绿色值.正整数 | 百分数 B:蓝色值.正整数| 百分数 A:透明度.取值0~1之间 为什么要用RGBA而不用opacity 因为在项目中需要用到一 ...

  7. CSS3 rgba

    复制粘贴: <!DOCTYPE html > <html > <head> <meta charset="utf-8"> <t ...

  8. 制作透明色：《CSS3 RGBA》与Opacity样式用法

    前面我们一起探讨了一下CSS3 Gradient(css3 渐变),今天我们一起来探讨一下CSS3中的RGBA.RGB对于大家来说一点不陌生,他就是红色R+绿色G+蓝色B,那现在我们所说的RGBA又是 ...

  9. CSS3 RGBA 属性高级用法

    这个属性的兼容问题比较简单,IE8已经支持这个属性,IE6和IE7也可以通过hack支持.RGBA和CSS2里的RBG属性差不多,只是RGBA属性多了一个透明度的定义,CSS3标准里对RGBA属性的解 ...

随机推荐

  1. Webstorm10.0.3破解程序及汉化包下载、Webstorm配置入门指南

    核心提示: WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaSscri ...

  2. C#基础枚举的设计

    枚举分为:简单枚举和标记枚举(为了枚举值位操作) 标记枚举的用法:

  3. 使用Razor来进行页面布局

    UI设计师们现在也讲究页面设计的语义化和结构化,把一个页面分成很多个模块,使用语义化的类名或id来标识这些模块.Razor推出了新的布局解决方案来迎合这一潮流. 这里涉及到Razor的一些语法,大家可 ...

  4. ORACLE用户操作的一些常用操作总结【weber出品】

    一.创建一个表空间 create tablespace pioneer_data datafile '/u01/datafile/pioneer_datadbf' size 100m autoexte ...

  5. php多文本框提交

    <form action="" method="post"><input type=text name=name[]><input ...

  6. 教训 Mac下装windows系统 失败后 磁盘空间丢失

    本来Mac上装的是win10 最近老提示快过期了 想到月底就要停止免费更新了 决定装一下win8 然后升级到win10 因为之前有过装win10的经验 所以很轻松 进入Mac 先到bootcamp 取 ...

  7. CSS太阳月亮地球三角恋旋转效果

    纯粹玩一下,好像没有什么实际的卵用,but,纯玩买不了上当,纯玩买不了受骗........ 地月旋转的一个css效果,无聊玩玩,可以复制到记事本试试 <!DOCTYPE html>< ...

  8. angularjs学习笔记—事件指令

    ngClick 适用标签:所有触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click=" ...

  9. IOS 客户端测试入门.pdf

    IOS 客户端测试入门  http://www.open-open.com/doc/view/42d1257bf67946f595e843bfdbdfeabf

  10. Android 网络通信框架Volley的简单使用

    Volley是Android平台上的网络通信库,能使网络通信更快,更简单,更健壮. Volley提供的功能: JSON,图像等的异步下载: 网络请求的排序(scheduling) 网络请求的优先级处理 ...