大家好，我是IT修真院鄭州分院第05期學(xué)員剪芍，一枚正直純潔善良的web程序員塞淹。今天給大家分享一下，修真院官網(wǎng)css任務(wù)7罪裹，GBA和OPACITY的透明效果有什么不同饱普？DISPLAY和VISIBLITY有什么區(qū)別？
1.背景介紹
1.什么是RGBA状共？
rgb大家都熟悉套耕，RGB色彩模式（也翻譯為“紅綠藍(lán)”，比較少用）是工業(yè)界的一種顏色標(biāo)準(zhǔn)峡继，是通過對(duì)紅(R)冯袍、綠(G)、藍(lán)(B)三個(gè)顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的鬓椭，RGB即是代表紅颠猴、綠关划、藍(lán)三個(gè)通道的顏色小染，這個(gè)標(biāo)準(zhǔn)幾乎包括了人類視力所能感知的所有顏色，是目前運(yùn)用最廣的顏色系統(tǒng)之一贮折。那現(xiàn)在我們所說的grba又是什么呢裤翩？說得簡(jiǎn)單一點(diǎn)就是在grb的基礎(chǔ)上加進(jìn)了一個(gè)通道alpha。
其實(shí)他就是來定義透明度的调榄。a的取值范圍是0-1之間踊赠，不可以是負(fù)值，r每庆、g筐带、b三個(gè)參數(shù)，正整數(shù)值的取值范圍為：0 - 255缤灵。百分?jǐn)?shù)值的取值范圍為：0.0% - 100.0%伦籍。超出范圍的數(shù)值將被截至其最接近的取值極限蓝晒。并非所有瀏覽器都支持使用百分?jǐn)?shù)值。
我們平時(shí)用的較多的是16進(jìn)制顏色帖鸦，例如黑色#000000;白色#FFFFFF芝薇，這些是16進(jìn)制表示的顏色，如果使用RGB顏色表示就是 rgb(0, 0, 0)與rgb(255,255,255)作儿，其實(shí)本質(zhì)上是一樣的洛二，只是一個(gè)是16進(jìn)制表示的，一個(gè)是二進(jìn)制表示的(RGB顏色)攻锰。
用rgba改變大娃字體顏色
用rgba改變大娃邊框顏色
用rgba改變大娃字體陰影顏色
用rgba改變大娃邊框陰影顏色
透明度還支持透明漸變晾嘶。這對(duì)于制作一些特殊的效果是相當(dāng)有用的，例如娶吞，當(dāng)堆疊多個(gè)背景時(shí)变擒。這里是兩個(gè)背景的結(jié)合：一張圖片，一個(gè)原諒綠到透明的線性漸變寝志。
加了這個(gè)漸變屬性
2.什么是OPACITY娇斑？
也是一個(gè)css3屬性，該屬性用于設(shè)置元素的不透明度級(jí)別材部，所有的瀏覽器都支持這個(gè)屬性毫缆。
opacity 中文翻譯為：不透明度。語法：opacity：value | inherit ;
取值說明: value 不透明度乐导，從0.0(完全透明)到1.0（完全不透明）苦丁。
3.什么是DISPLAY：NONE
將元素與其子元素從普通文檔流中移除。這時(shí)文檔的渲染就像元素從來沒有存在過一樣物臂，也就是說它所占據(jù)的空間被折疊了旺拉。元素的內(nèi)容也會(huì)被屏幕閱讀所忽略。隱藏起來棵磷。
4.什么是VISIBLITY
w3school上給的定義 定義和用法 visibility 屬性規(guī)定元素是否可見蛾狗。 提示：即使不可見的元素也會(huì)占據(jù)頁面上的空間。請(qǐng)使用 "display" 屬性來創(chuàng)建不占據(jù)頁面空間的不可見元素仪媒。
二.知識(shí)剖析
1.RGBA與OPACITY的區(qū)別
opacity會(huì)繼承父元素的opacity 屬性沉桌，而RGBA設(shè)置的元素的后代元素不會(huì)繼承不透明屬性。簡(jiǎn)單來說就是opacity作用于元素和元素所有內(nèi)容的透明
rgba相對(duì)于opacity還是技高一籌的算吩，當(dāng)然只要是涉及顏色的留凭，都可以用rgba來設(shè)置。
三.常見問題
DISPLAY 和VISIBILITY有什么區(qū)別?
四.解決方案
1.主要在于visibility:hidden占據(jù)空間偎巢，無法點(diǎn)擊蔼夜，另一個(gè)display:none;不占據(jù)空間，無法點(diǎn)擊压昼。有一句話是這么說的求冷，display：none會(huì)真的把你弄沒翠订，而visibility：hidden則僅僅是為你披上一件隱身衣而已，你還在原來的地方呆著遵倦。設(shè)置透明值(opcity)尽超，占據(jù)空間，可以點(diǎn)擊梧躺。 該方法并非真正意義上的隱藏似谁，只是將元素設(shè)為透明，但是只適用于文字類的元素掠哥，不適用于input巩踏，因?yàn)榧词箍床坏剑梢渣c(diǎn)擊相應(yīng)input续搀。
2.就是displayde回流與渲染visibility沒有這個(gè)影響前端性能的問題塞琼。回流則是重新使該頁面渲染一次禁舷，從而影響性能彪杉。
3.株連性,所謂“株連性”，就是如果祖先元素遭遇某禍害牵咙，則其子子孫孫無一例外也要遭殃派近。display:none就是“株連性”明顯的聲明：一旦父節(jié)點(diǎn)元素應(yīng)用了display:none，父節(jié)點(diǎn)及其子孫節(jié)點(diǎn)元素全部不可見洁桌，而且無論其子孫元素如何不屈地掙扎都無濟(jì)于事.我們給一個(gè)父元素應(yīng)用visibility:hidden渴丸，則其子孫后代也都會(huì)全部不可見。如果子孫元素應(yīng)用了visibility:visible另凌，那么這個(gè)子孫元素又會(huì)劉謙般地顯現(xiàn)出來谱轨。
對(duì)比總結(jié)： display:none是個(gè)相當(dāng)慘無人道的聲明，子孫后代全部搞死（株連性）吠谢，而且連塊安葬的地方都不留（不留空間）土童，導(dǎo)致全體民眾嘩然（渲染與回流）。 visibility:hidden則具有人道主義關(guān)懷囊卜，雖然不得已搞死子孫娜扇，但是子孫可以通過一定手段避免（偽株連性），而且死后全尸栅组，墓地俱全（占據(jù)空間），國(guó)內(nèi)民眾比較淡然（無渲染與回流）枢析。
五.編碼實(shí)戰(zhàn)
六.擴(kuò)展思考
什么是漸變
CSS3 Gradient分為linear-gradient(線性漸變)和radial-gradient(徑向漸變)玉掸。
詳見dome
7.參考文獻(xiàn)
參考一：handongopqwe的專欄
參考二：CSS3 Gradient
參考三：張?jiān)频牟┛?/a>
8.更多討論
更多討論：大家有沒有其他實(shí)現(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ù)空間租谈，可以點(diǎn)擊篮奄。 該方法并非真正意義上的隱藏，只是將元素設(shè)為透明割去，但是只適用于文字類的元素窟却，不適用于input，因?yàn)榧词箍床坏缴肽妫梢渣c(diǎn)擊相應(yīng)input夸赫。
鳴謝
感謝何華颯、王相博師兄咖城，此教程是在他們之前技術(shù)分享的基礎(chǔ)上完善而成
感謝大家觀看
BY : 何華颯| 王相博 | 王姝麗
今天的分享就到這里啦，歡迎大家點(diǎn)贊宜雀、轉(zhuǎn)發(fā)滓彰、留言、拍磚~
我們下周再見州袒！
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個(gè)工程師揭绑，現(xiàn)在開始，找個(gè)師兄郎哭，帶你入門他匪，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷每溲校”邦蜜。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線亥至，學(xué)習(xí)透明化悼沈，成長(zhǎng)可見化，師兄1對(duì)1免費(fèi)指導(dǎo)姐扮⌒豕快來與我一起學(xué)習(xí)吧~
我的邀請(qǐng)鏈接：http://www.jnshu.com/login/1/12164783
