一、今天完成的事情

1.什么是RGBA？

RGBA是由Red（红色） Green（绿色） Blue（蓝色）和 Alpha（透明度）的色彩空间。

它有一个相似的词RGB，也就是我们听得比较耳熟的三原色。

它是一种色彩模式，是工业界的一种颜色标准，通过对红(Red)、绿(Green)、蓝(Blue)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。那现在我们所说的RGBA又是什么呢？说得简单一点就是在红、绿、蓝 三个通道的基础上加进了一个通道透明。

其实它就是来定义透明度的。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颜色)。

透明度还支持透明渐变。这对于制作一些特殊的效果是相当有用的，例如，当堆叠多个背景时。这里是两个背景的结合：一张图片，一个原谅绿到透明的线性渐变。

加了这个渐变属性

2.什么是OPACITY？

也是一个css3属性，该属性用于设置元素的不透明度级别，所有的浏览器都支持这个属性。

opacity 中文翻译为：不透明度。语法：opacity：value | inherit ;

取值说明: value 不透明度，从0.0(完全透明)到1.0（完全不透明）。

3.什么是Display：none

属性规定元素应该生成的框的类型。值为none，表示元素不会被显示, 位置也不再被占据

添加了这个属性会将元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样，也就是说它所占据的空间被折叠了。元素的内容也会被屏幕阅读所忽略。隐藏起来。

4.什么是Visibility:hidden

visibility 属性规定元素是否可见。值为hidden，表示元素不可见。但是会占据原有位置。

w3school上给的定义 定义和用法 visibility 属性规定元素是否可见。 提示：即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。

二.知识剖析

1.RGBA与OPACITY的区别

opacity会继承父元素的opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。简单来说就是opacity作用于元素和元素所有内容的透明，子孙后代都会继承初代元素的值，子孙元素设为别的值都是无效的。

而RGBA可以单独的为某个被设置的元素设置透明度，而它的子孙元素不会被它的设置所影响。

三.常见问题

1.RGBA与OPACITY的区别？

2. DISPLAY：NONE和VISIBILITY：HIDDEN的区别?

四.解决方案

2. DISPLAY：NONE和VISIBILITY：HIDDEN的区别?

visibility：hidden:隐藏元素并且占据该元素原来的空间。子级设置visible后不受父级影响。

display：none:隐藏元素但不占据该元素原来的空间。父级设置值为none后，无论子级设置任何值都无法显示。

1.主要在于visibility:hidden占据空间，无法点击，另一个display:none;不占据空间，无法点击。有一句话是这么说的，display：none会真的把你弄没，而visibility：hidden则仅仅是为你披上一件隐身衣而已，你还在原来的地方呆着。设置透明值(opcity)，占据空间，可以点击。 该方法并非真正意义上的隐藏，只是将元素设为透明，但是只适用于文字类的元素，不适用于input，因为即使看不到，可以点击相应input。

2.就是

displayed回流与渲染visibility没有这个影响前端性能的问题。回流则是重新使该页面渲染一次，从而影响性能。

3.株连性,所谓“株连性”，就是如果祖先元素遭遇某祸害，则其子子孙孙无一例外也要遭殃。display:none就是“株连性”明显的声明：一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事.我们给一个父元素应用visibility:hidden，则其子孙后代也都会全部不可见。如果子孙元素应用了visibility:visible，那么这个子孙元素又会刘谦般地显现出来。

对比总结： display:none是个相当惨无人道的声明，子孙后代全部搞死（株连性），而且连块安葬的地方都不留（不留空间），导致全体民众哗然（渲染与回流）。 visibility:hidden则具有人道主义关怀，虽然不得已搞死子孙，但是子孙可以通过一定手段避免（伪株连性），而且死后全尸，墓地俱全（占据空间），国内民众比较淡然（无渲染与回流）。

扩展思考

什么是渐变

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。

linear-gradient(线性渐变

第一个参数指明了颜色渐变的方向：

• 可以是角度，比如0deg，表示正上方向，90deg表示向右（顺时针）

• 也可以是关键词，比如to top, to right, to bottom, to left, 分别对应了0deg, 90deg, 180deg, 270deg。当然也可以不指定，默认值是to bottom

第二个参数指明了颜色断点（即color-stop）。位置可以省略，第一个默认为0%，最后一个默认为100%，如果中间的值没有指定，则按颜色数目求均值，

radial-gradient(径向渐变

radial gradient其实就是颜色从一个点以同心圆或者椭圆向外渐变。

• position用来指定渐变圆心的位置，默认为center，赋值规则与background-positon的类似；

• ending-shape可以是circle或者elipse，如果省略，则默认值与size相关，size指定一个值就是圆形，否则是椭圆；

• size可以是具体的值，也可以用关键字指定，默认值是farthest-corner。如果是具体值，圆形需要一个数值，椭圆需要两个。关键字则包括：

   

   

• closest-side 指gradient box某一边到盒子中心最近的距离；

• farthest-side 指gradient box某一边到盒子中心最远的距离；

• closest-corner 指gradient box某一顶点到盒子中心最近的距离；

• farthest-corner 指gradient box某一顶点到盒子中心最远的距离；

• color-stop-list与linear-gradient类似

二、遇到的困哪

暂时没有

三、明天要做的事情

开始任务八

四、收获

学习了透明的不同写法，而且修改了任务七的bug