opacity和rgba,opacity取值范围
RGBA和OPACITY的透明效果有什么不同？
1.背景介绍
1.什么是RGBA？
rgb大家都熟悉，RGB色彩模式（也翻译为“红绿蓝”，比较少用）是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。那现在我们所说的grba又是什么呢？说得简单一点就是在grb的基础上加进了一个通道alpha。
其实他就是来定义透明度的。a的取值范围是0-1之间，不可以是负值，r、g、b三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。
我们平时用的较多的是16进制颜色，例如黑色#000000;白色#FFFFFF，这些是16进制表示的颜色，如果使用RGB颜色表示就是 rgb(0, 0, 0)与rgb(255,255,255)，其实本质上是一样的，只是一个是16进制表示的，一个是二进制表示的(RGB颜色)。
用rgba改变大娃字体颜色
用rgba改变大娃边框颜色
用rgba改变大娃字体阴影颜色
用rgba改变大娃边框阴影颜色
其实我是一个dome
透明度还支持透明渐变。这对于制作一些特殊的效果是相当有用的，例如，当堆叠多个背景时。这里是两个背景的结合：一张图片，一个原谅绿到透明的线性渐变。
加了这个渐变属性
2.什么是OPACITY？
也是一个css3属性，该属性用于设置元素的不透明度级别，所有的浏览器都支持这个属性。
opacity 中文翻译为：不透明度。语法：opacity：value | inherit ;
取值说明: value 不透明度，从0.0(完全透明)到1.0（完全不透明）。
3.什么是DISPLAY：NONE
将元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样，也就是说它所占据的空间被折叠了。元素的内容也会被屏幕阅读所忽略。隐藏起来。
4.什么是VISIBLITY
w3school上给的定义 定义和用法 visibility 属性规定元素是否可见。 提示：即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。
二.知识剖析
1.RGBA与OPACITY的区别
opacity会继承父元素的opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。简单来说就是opacity作用于元素和元素所有内容的透明
rgba相对于opacity还是技高一筹的，当然只要是涉及颜色的，都可以用rgba来设置。
三.常见问题
DISPLAY 和VISIBILITY有什么区别?
四.解决方案
1.主要在于visibility:hidden占据空间，无法点击，另一个display:none;不占据空间，无法点击。有一句话是这么说的，display：none会真的把你弄没，而visibility：hidden则仅仅是为你披上一件隐身衣而已，你还在原来的地方呆着。设置透明值(opcity)，占据空间，可以点击。 该方法并非真正意义上的隐藏，只是将元素设为透明，但是只适用于文字类的元素，不适用于input，因为即使看不到，可以点击相应input。
2.就是displayde回流与渲染visibility没有这个影响前端性能的问题。回流则是重新使该页面渲染一次，从而影响性能。
3.株连性,所谓“株连性”，就是如果祖先元素遭遇某祸害，则其子子孙孙无一例外也要遭殃。display:none就是“株连性”明显的声明：一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事.我们给一个父元素应用visibility:hidden，则其子孙后代也都会全部不可见。如果子孙元素应用了visibility:visible，那么这个子孙元素又会刘谦般地显现出来。
对比总结： display:none是个相当惨无人道的声明，子孙后代全部搞死（株连性），而且连块安葬的地方都不留（不留空间），导致全体民众哗然（渲染与回流）。 visibility:hidden则具有人道主义关怀，虽然不得已搞死子孙，但是子孙可以通过一定手段避免（伪株连性），而且死后全尸，墓地俱全（占据空间），国内民众比较淡然（无渲染与回流）。
五.编码实战
六.扩展思考
什么是渐变
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。
详见dome
7.参考文献
参考一： handongopqwe的专栏
参考二： CSS3 Gradient
参考三： 张云的博客
8.更多讨论
更多讨论：大家有没有其他实现透明或隐藏的方法?
某些情况下可以使用left:-100000px来达到同样效果。
position: relative;效果类似于visibility:hidden;还占着位置，不愿离开。
position: absolute;效果类似于display:none;消失的很远，还不占地方。
opacity ：0 和 visbility :hidden 之间有什么区别
visibility：hidden则仅仅是为你披上一件隐身衣而已，你还在原来的地方呆着。设置透明值(opcity)，占据空间，可以点击。 该方法并非真正意义上的隐藏，只是将元素设为透明，但是只适用于文字类的元素，不适用于input，因为即使看不到，可以点击相应input。
鸣谢
感谢何华飒、王相博师兄，此教程是在他们之前技术分享的基础上完善而成
感谢大家观看
BY : 何华飒| 王相博 | 王姝丽
PPT链接
视频链接
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
我们下周再见！
------------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~
我的邀请链接：
CSS透明度之rgba和opacity的区别
在CSS样式中，设置透明度的方式有两种。其一， opacity ；其二 rgba() 。
opacity 和 rgba() 在一定程度上是没什么区别。
1、opacity
取值在0到1之间，0表示完全透明，1表示完全不透明。
2、rgba
rgba语法:
rgba()和opacity都能实现透明效果，主要区别有以下2点：
比如，我们写透明的黑色部分都是用opcity（0.3），但这带出来一个问题就是如果你在这一div上写字的话，然后那个字体也会变成透明色。所以我们采取rgba的样式写，前面三个数字分别对应r,g,b,的三种颜色，第四位的数字对应的是透明的系数。
rgba和opacity的透明效果有什么不同
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）
rgba与opacity的区别
rgba与opacity的区别，其实说了无数次了，但是我自己在重复一次吧，多多益善。
value 取值0~1，0为完全透明，1为完全不透明。默认是继承父元素opacity属性，所以子元素会继承父元素的opacity属性值，从而产生相同的效果。
但是单独设置子元素opacity的值会产生单独的效果，前提是属性值小于等于父元素的属性值，否则修改无效，继承保持父元素的属性值。
rgba函数在rgb颜色模式基础上增加了alpha通道，alpha通道是不透明度，这样可以在设置颜色的同时去设置透明度。alpha取值在0~1之间。
设置rgba只会对元素本身产生影响，因为无法继承，所以不会对子元素产生影响。