大家好，我是IT修真院鄭州分院第05期學員，一枚正直純潔善良的web程序員。今天給大家分享一下，修真院官網css任務7，GBA和OPACITY的透明效果有什么不同？DISPLAY和VISIBLITY有什么區別？
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改變大娃邊框陰影顏色
透明度還支持透明漸變。這對于制作一些特殊的效果是相當有用的，例如，當堆疊多個背景時。這里是兩個背景的結合：一張圖片，一個原諒綠到透明的線性漸變。
加了這個漸變屬性
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 : 何華颯| 王相博 | 王姝麗
今天的分享就到這里啦，歡迎大家點贊、轉發、留言、拍磚~
我們下周再見！
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧~
我的邀請鏈接：http://www.jnshu.com/login/1/12164783
