大家好，我是IT修真院北京分院第23期的學員郭婷婷棱烂，一枚正直純潔善良的WEB前端程序員境输。
今天給大家分享一下仪或，修真院官網(wǎng)CSS任務7中涉及的關(guān)于RGBA和OPACITY的透明效果有何不同以及DISPLAY:NONE和VISIBILITY：HIDDEN的區(qū)別幼东。
小課堂【北京第184期】
分享人：郭婷婷
1.背景介紹
1.1 RGBA && OPACITY
最開始接觸rgba和opacity是任務七中要求游戲結(jié)果頁面頁腳的底色為半透明臂容，但里面的按鈕不會跟著半透明。開始覺得很簡單根蟹，因為網(wǎng)上教程原話是“通過 CSS 創(chuàng)建透明圖像是很容易的脓杉。”“CSS opacity 屬性是 W3C CSS 推薦標準的一部分简逮∏蛏ⅲ”定義透明效果的 CSS3 屬性是 opacity,如下圖：
于是，更換了另一種方法：RGBA
1.2 DISPLAY:NONE && VISIBILITY:HIDDEN
同樣是在任務七中买决，出現(xiàn)需要隱藏的元素沛婴，于是就開始尋找可以實現(xiàn)效果的代碼。 “display：none”和“visibility：hidden”都可以實現(xiàn)督赤，但是他們二者區(qū)別在后面闡述。
2.知識剖析
2.1 RGBA
RGBA是代表Red（紅色） Green（綠色） Blue（藍色）和 Alpha的色彩空間泻蚊，也就是透明度/不透明度躲舌。
R：紅色值。正整數(shù) | 百分數(shù)
G：綠色值性雄。正整數(shù) | 百分數(shù)
B：藍色值没卸。正整數(shù)| 百分數(shù)
A：透明度。取值0~1之間,取值為0秒旋，那它就是完全透明的（也就是看不見的）约计，而數(shù)值為,1則意味著一個完全不透明的像素。
2.2 OPACITY
語法： opacity: value|inherit;
value:規(guī)定不透明度迁筛。從 0.0 （完全透明）到 1.0（完全不透明）煤蚌。
從父元素繼承 opacity 屬性的值。
DISPLAY:NONE
2.3 display?
屬性規(guī)定元素應該生成的框的類型。值為none尉桩，表示元素不會被顯示筒占。位置也不再被占據(jù)。
2.4 VISIBILITY:HIDDEN
visibility 屬性規(guī)定元素是否可見蜘犁。值為hidden翰苫，表示元素不可見。但是會占據(jù)原有位置这橙。
3.常見問題
3.1 RGBA和OPACITY的區(qū)別
3.2 DISPLAY：NONE和VISIBILITY：HIDDEN的區(qū)別
4 解決方案
4.1 RGBA和OPACITY的區(qū)別
opacity會繼承父元素的 opacity 屬性奏窑，而RGBA設(shè)置的元素的后代元素不會繼承不透明屬性。 即可以單獨為被設(shè)置的元素設(shè)置透明度屈扎，而子元素而不受該設(shè)置影響埃唯。
4.2 DISPLAY：NONE和VISIBILITY：HIDDEN的區(qū)別
visibility：hidden:隱藏元素并且占據(jù)該元素原來的空間。子級設(shè)置visible后不受父級影響助隧。
display：none:隱藏元素但不占據(jù)該元素原來的空間筑凫。父級設(shè)置值為none后，無論子級設(shè)置任何值都無法顯示并村。
5.編碼實戰(zhàn)
6.擴展思考
如果給子級的opacity單獨設(shè)置一個值巍实，可否掙脫父級的束縛？
答案是否定的哩牍。
7.參考文獻
參考1：W3school
8. 更多討論
問：為何父級設(shè)置opacity后棚潦，子級無論如何設(shè)置opacity值都會透明
答：父級元素設(shè)置opacity后，就像一個透明膜覆蓋在正個元素上面膝昆，子級元素設(shè)置任何opacity值丸边，但是只要他在盒子內(nèi)部，就會被透明盒蓋蓋住荚孵。
問：如果給元素同時設(shè)置opacity和rgba會如何
答：他們倆的透明效果會疊加在一起妹窖。
問：如果子級元素設(shè)置visibility：visible而父級設(shè)置hidden會如何
答：除設(shè)置visble的正常顯示，其余都隱藏收叶。
鳴謝
感謝大家觀看
BY :? 郭婷婷
PPT鏈接：https://ptteng.github.io/PPT/PPT/css-07-rgba.html#/
--------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現(xiàn)在開始判没，找個師兄蜓萄，帶你入門，掌控自己學習的節(jié)奏澄峰，學習的路上不再迷眉倒粒”。
這里是技能樹.IT修真院俏竞，成千上萬的師兄在這里找到了自己的學習路線绸硕，學習透明化堂竟，成長可見化，師兄1對1免費指導臣咖≡镜罚快來與我一起學習吧?！
