一．背景介紹：
1.你們在寫頁面時，會用到各類元素，好比div, img等等。有時候一張頁面會放好幾張圖片，圖片若是顯示效果都同樣，看起來很單調，整個頁面給人的感受會很硬。那麼，怎麼能讓頁面的元素有一種多樣化，甚至有一種朦朧美呢？因而，有了opacity和rgba()這兩個屬性。其中，opacity屬性是css3新提的屬性。css
2.另外，在看一下display和visibility背景介紹，故名思意，display和visibility是與元素顯示有關係的，這兩個屬性均可以控制元素的顯示與隱藏。究其做用，咱們能夠知道，爲了提升用戶的體驗，實現更好的頁面甚至元素與用戶的互動，當用戶開始某個操做時，能夠經過display和visibility這兩個屬性讓元素顯示或者隱藏，或者以哪一種方式顯示。css3
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）時則意味着該元素徹底不透明。markdown
而後，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。post
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；慢。