一．背景介绍：
1.大家在写页面时，会用到各种元素，比如div, img等等。有时候一张页面会放好几张图片，图片如果显示效果都一样，看起来很单调，整个页面给人的感觉会很硬。那么，怎么能让页面的元素有一种多样化，甚至有一种朦胧美呢？于是，有了opacity和rgba()这两个属性。其中，opacity属性是css3新提的属性。
2.另外，在看一下display和visibility背景介绍，故名思意，display和visibility是与元素显示有关系的，这两个属性都可以控制元素的显示与隐藏。究其作用，我们可以知道，为了提高用户的体验，实现更好的页面甚至元素与用户的互动，当用户开始某个操作时，可以通过display和visibility这两个属性让元素显示或者隐藏，或者以哪种方式显示。
3.综上所述；其实某个元素产生的背景和原因，就是为了满足日益增长的用户体验要求。
二．具体来看：
1.Opacity和rgba()的用法以及二者的区别：
首先，opacity 中文翻译为：不透明度。语法：opacity：value | inherit ;
取值说明: value 不透明度，从0.0(完全透明)到1.0（完全不透明）。
注意：IE8以及更早版本支持替代的filter属性。例如：filter: Alpha（opacity=50）
其次，看一下rgba(),
语法：rgba(r,g,b,a)
取值说明：
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
A：Alpha透明度。取值0~1之间。
正整数为十进制0~255之间的任意值，百分数为0%~100%之间的任意值。
RGBA是在R（Red）G（Green）B（Blue）模式上增加了alpha通道，alpha通道是不透明度，即，如果一个元素的alpha通道数值为0%（或0），那该元素就是完全透明的（也就是看
不见的，但是可以透过该元素看到该元素下的元素），数值为100%（或255）时则意味着该元素完全不透明。
然后，RGBA和opacity都是用来设置元素的不透明度的，那么两者有什么区别呢？
opacity会继承父元素的opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。简单来说就是opacity作用于元素和元素所有内容的透明
.rgba {
background: rgba(255,0,0,0.5);
}
.opacity { background : red ; opacity: 0.5;}
所以，rgba相对于opacity还是技高一筹的，当然只要是涉及颜色的，都可以用rgba来设置。比如background-color,text-shadow, box-shadow。
w3c上面的：
- HSL 颜色值是这样规定的：hsl(hue, saturation, lightness)。
- HSL 指的是 hue（色调）、saturation（饱和度）、lightness（亮度） - 表示颜色柱面坐标表示法。
- Hue 是色盘上的度数（从 0 到 360） - 0 (或 360) 是红色，120 是绿色，240 是蓝色。
- Saturation 是百分比值；0% 意味着灰色，而 100% 是全彩。
- Lightness 同样是百分比值；0% 是黑色，100% 是白色。
HSLA 颜色
HSLA 颜色值是 HSL 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
HSLA 颜色值是这样规定的：hsla(hue, saturation, lightness, alpha)，其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。
2.关于CSS 中display 和visibility的用法和区别？
Display : 指定一个元素如何显示，visibility指定一个元素应该显示还是隐藏。
Display属性可以改变一个元素的显示状态。主要结合元素自身默认的display属性，来控制元素的显示状态，比如可以让inline元素，显示为inline-block或者block元素。反之 亦然。
Visibility属性如上所述，表示元素是否可见。其可能的值有默认值：visible。Hidden,元素是不可见的。Inherit从父元素继承其属性值。
其实，重点是，要讲的他们的区别：是display值为none时，visibility值为hidden时的区别。
当元素设置display属性值为none时，元素会消失不可见，同时，元素原所在的位置会让其后面的元素占据，说白了，就是元素就不存在了。
而，visibility：hidden；表现上也是元素不见了，但是依然占有位置空间，仅仅是在视觉上“消失了”，hidden 也就是隐藏。而对使用display：none；浏览器不会解析，搜 索引擎可能会认为被隐藏的元素属于垃圾信息，会忽视。而且，屏幕阅读器会会忽略被隐藏的文字。
最后，对使用visibility：hidden；虽然隐藏了，但位置仍然在给人的感觉就是“占着茅坑不拉屎”要配合position：relative；和position：absolute;来用，没有display：none；那么简单，灵活。有一点是，visibility：hidden；转换为visibility：visible;时，跟display：none转换为display：block;性能要好，因为display在切换可见性时，会产生reflow,他要重新构建frame,当然要比visibility：visible；慢。