一．背景介紹：

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上面的：

1. HSL 顏色值是這樣規定的：hsl(hue, saturation, lightness)。
2. HSL 指的是 hue（色調）、saturation（飽和度）、lightness（亮度） - 表示顏色柱面坐標表示法。
3. Hue 是色盤上的度數（從 0 到 360） - 0 (或 360) 是紅色，120 是綠色，240 是藍色。
4. Saturation 是百分比值；0% 意味著灰色，而 100% 是全彩。
5. 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；慢。

轉 opacity() 和 rgba() 的區別？display 和 visibility 有什麽不同？