大家好，我是IT修真院成都分院第09期學(xué)員郎汪，一枚正直純潔善良的web程序員赤赊。今天給大家分享一下，修真院官網(wǎng)css任務(wù)6煞赢，GBA和OPACITY的透明效果有什么不同抛计？DISPLAY和VISIBLITY有什么區(qū)別？
1.背景介紹
1.什么是RGBA耕驰？
rgb大家都熟悉爷辱，RGB色彩模式（也翻譯為“紅綠藍(lán)”，比較少用）是工業(yè)界的一種顏色標(biāo)準(zhǔn)朦肘，是通過對紅(R)饭弓、綠(G)、藍(lán)(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的媒抠，RGB即是代表紅弟断、綠、藍(lán)三個通道的顏色趴生，這個標(biāo)準(zhǔn)幾乎包括了人類視力所能感知的所有顏色阀趴，是目前運用最廣的顏色系統(tǒng)之一昏翰。那現(xiàn)在我們所說的grba又是什么呢？說得簡單一點就是在grb的基礎(chǔ)上加進(jìn)了一個通道alpha刘急。
其實他就是來定義透明度的棚菊。a的取值范圍是0-1之間，不可以是負(fù)值叔汁，r统求、g、b三個參數(shù)据块，正整數(shù)值的取值范圍為：0 - 255码邻。百分?jǐn)?shù)值的取值范圍為：0.0% - 100.0%。超出范圍的數(shù)值將被截至其最接近的取值極限另假。并非所有瀏覽器都支持使用百分?jǐn)?shù)值像屋。
我們平時用的較多的是16進(jìn)制顏色，例如黑色#000000;白色#FFFFFF边篮，這些是16進(jìn)制表示的顏色己莺，如果使用RGB顏色表示就是 rgb(0, 0, 0)與rgb(255,255,255)，其實本質(zhì)上是一樣的苟耻，只是一個是16進(jìn)制表示的篇恒，一個是二進(jìn)制表示的(RGB顏色)。
透明度還支持透明漸變凶杖。這對于制作一些特殊的效果是相當(dāng)有用的，例如款筑，當(dāng)堆疊多個背景時智蝠。這里是兩個背景的結(jié)合：一張圖片，一個原諒綠到透明的線性漸變奈梳。
2.什么是OPACITY杈湾？
也是一個css3屬性，該屬性用于設(shè)置元素的不透明度級別攘须，所有的瀏覽器都支持這個屬性漆撞。
opacity 中文翻譯為：不透明度。語法：opacity：value | inherit ;
取值說明: value 不透明度于宙，從0.0(完全透明)到1.0（完全不透明）浮驳。
3.什么是DISPLAY：NONE
將元素與其子元素從普通文檔流中移除。這時文檔的渲染就像元素從來沒有存在過一樣捞魁，也就是說它所占據(jù)的空間被折疊了至会。元素的內(nèi)容也會被屏幕閱讀所忽略。隱藏起來谱俭。
4.什么是VISIBLITY
w3school上給的定義 定義和用法 visibility 屬性規(guī)定元素是否可見奉件。 提示：即使不可見的元素也會占據(jù)頁面上的空間宵蛀。請使用 "display" 屬性來創(chuàng)建不占據(jù)頁面空間的不可見元素。
二.知識剖析
1.RGBA與OPACITY的區(qū)別
opacity會繼承父元素的opacity 屬性县貌，而RGBA設(shè)置的元素的后代元素不會繼承不透明屬性术陶。簡單來說就是opacity作用于元素和元素所有內(nèi)容的透明
rgba相對于opacity還是技高一籌的，當(dāng)然只要是涉及顏色的煤痕，都可以用rgba來設(shè)置梧宫。
三.常見問題
DISPLAY 和VISIBILITY有什么區(qū)別?
四.解決方案
1.主要在于visibility:hidden占據(jù)空間，無法點擊杭攻，另一個display:none;不占據(jù)空間祟敛，無法點擊。有一句話是這么說的兆解，display：none會真的把你弄沒馆铁，而visibility：hidden則僅僅是為你披上一件隱身衣而已，你還在原來的地方呆著锅睛。設(shè)置透明值(opcity)埠巨，占據(jù)空間，可以點擊现拒。 該方法并非真正意義上的隱藏辣垒，只是將元素設(shè)為透明，但是只適用于文字類的元素印蔬，不適用于input勋桶，因為即使看不到，可以點擊相應(yīng)input侥猬。
2.就是displayde回流與渲染visibility沒有這個影響前端性能的問題例驹。回流則是重新使該頁面渲染一次退唠，從而影響性能鹃锈。
3.株連性,所謂“株連性”，就是如果祖先元素遭遇某禍害瞧预，則其子子孫孫無一例外也要遭殃屎债。display:none就是“株連性”明顯的聲明：一旦父節(jié)點元素應(yīng)用了display:none，父節(jié)點及其子孫節(jié)點元素全部不可見垢油，而且無論其子孫元素如何不屈地掙扎都無濟(jì)于事.我們給一個父元素應(yīng)用visibility:hidden盆驹，則其子孫后代也都會全部不可見。如果子孫元素應(yīng)用了visibility:visible秸苗，那么這個子孫元素又會劉謙般地顯現(xiàn)出來召娜。
對比總結(jié)： display:none是個相當(dāng)慘無人道的聲明，子孫后代全部搞死（株連性）惊楼，而且連塊安葬的地方都不留（不留空間）玖瘸，導(dǎo)致全體民眾嘩然（渲染與回流）秸讹。 visibility:hidden則具有人道主義關(guān)懷，雖然不得已搞死子孫雅倒，但是子孫可以通過一定手段避免（偽株連性）璃诀，而且死后全尸，墓地俱全（占據(jù)空間）蔑匣，國內(nèi)民眾比較淡然（無渲染與回流）劣欢。
五.編碼實戰(zhàn)
六.擴展思考
什么是漸變
CSS3 Gradient分為linear-gradient(線性漸變)和radial-gradient(徑向漸變)。
7.參考文獻(xiàn)
參考一：handongopqwe的專欄
參考二：CSS3 Gradient
參考三：張云的博客
8.更多討論
大家有沒有其他實現(xiàn)透明或隱藏的方法?
某些情況下可以使用left:-100000px來達(dá)到同樣效果裁良。
position: relative;效果類似于visibility:hidden;還占著位置凿将，不愿離開。
position: absolute;效果類似于display:none;消失的很遠(yuǎn)价脾，還不占地方牧抵。
opacity ：0 和 visbility :hidden 之間有什么區(qū)別?
visibility：hidden則僅僅是為你披上一件隱身衣而已，你還在原來的地方呆著侨把。設(shè)置透明值(opcity)犀变，占據(jù)空間，可以點擊秋柄。 該方法并非真正意義上的隱藏获枝，只是將元素設(shè)為透明，但是只適用于文字類的元素骇笔，不適用于input省店，因為即使看不到，可以點擊相應(yīng)input笨触。
鳴謝
感謝沁修 | 火山 | 葉紫陽 師兄萨西，此教程是在他們之前技術(shù)分享的基礎(chǔ)上完善而成
感謝大家觀看
GBA和OPACITY的透明效果有什么不同？_騰訊視頻
今天的分享就到這里啦，歡迎大家點贊葱跋、轉(zhuǎn)發(fā)持寄、留言、拍磚~
我們下周再見娱俺！
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師稍味，現(xiàn)在開始，找個師兄荠卷，帶你入門模庐，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷糜鸵耍”掂碱。
這里是技能樹.IT修真院怜姿，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化疼燥，成長可見化沧卢，師兄1對1免費指導(dǎo)∽碚撸快來與我一起學(xué)習(xí)吧~
