大家好，我是IT修真院北京分院第23期的學員郭婷婷，一枚正直純潔善良的WEB前端程序員。

今天給大家分享一下，修真院官網CSS任務7中涉及的關于RGBA和OPACITY的透明效果有何不同以及DISPLAY:NONE和VISIBILITY：HIDDEN的區別。

小課堂【北京第184期】

分享人：郭婷婷

1.背景介紹

1.1 RGBA && OPACITY

最開始接觸rgba和opacity是任務七中要求游戲結果頁面頁腳的底色為半透明，但里面的按鈕不會跟著半透明。開始覺得很簡單，因為網上教程原話是“通過 CSS 創建透明圖像是很容易的。”“CSS opacity 屬性是 W3C CSS 推薦標準的一部分。”定義透明效果的 CSS3 屬性是 opacity,如下圖：

使用opacity的效果

于是，更換了另一種方法：RGBA

使用RGBA的效果

1.2 DISPLAY:NONE && VISIBILITY:HIDDEN

同樣是在任務七中，出現需要隱藏的元素，于是就開始尋找可以實現效果的代碼。 “display：none”和“visibility：hidden”都可以實現，但是他們二者區別在后面闡述。

原圖

隱藏下面四個圖片

2.知識剖析

2.1 RGBA

RGBA是代表Red（紅色） Green（綠色） Blue（藍色）和 Alpha的色彩空間，也就是透明度/不透明度。

R：紅色值。正整數 | 百分數

G：綠色值。正整數 | 百分數

B：藍色值。正整數| 百分數

A：透明度。取值0~1之間,取值為0，那它就是完全透明的（也就是看不見的），而數值為,1則意味著一個完全不透明的像素。

2.2 OPACITY

語法： opacity: value|inherit;

value:規定不透明度。從 0.0 （完全透明）到 1.0（完全不透明）。

從父元素繼承 opacity 屬性的值。

DISPLAY:NONE

2.3 display?

屬性規定元素應該生成的框的類型。值為none，表示元素不會被顯示。位置也不再被占據。

2.4 VISIBILITY:HIDDEN

visibility 屬性規定元素是否可見。值為hidden，表示元素不可見。但是會占據原有位置。

3.常見問題

3.1 RGBA和OPACITY的區別

3.2 DISPLAY：NONE和VISIBILITY：HIDDEN的區別

4 解決方案

4.1 RGBA和OPACITY的區別

opacity會繼承父元素的 opacity 屬性，而RGBA設置的元素的后代元素不會繼承不透明屬性。 即可以單獨為被設置的元素設置透明度，而子元素而不受該設置影響。

4.2 DISPLAY：NONE和VISIBILITY：HIDDEN的區別

visibility：hidden:隱藏元素并且占據該元素原來的空間。子級設置visible后不受父級影響。

display：none:隱藏元素但不占據該元素原來的空間。父級設置值為none后，無論子級設置任何值都無法顯示。

5.編碼實戰

6.擴展思考

如果給子級的opacity單獨設置一個值，可否掙脫父級的束縛？

答案是否定的。

7.參考文獻

參考1：W3school

8. 更多討論

問：為何父級設置opacity后，子級無論如何設置opacity值都會透明

答：父級元素設置opacity后，就像一個透明膜覆蓋在正個元素上面，子級元素設置任何opacity值，但是只要他在盒子內部，就會被透明盒蓋蓋住。

問：如果給元素同時設置opacity和rgba會如何

答：他們倆的透明效果會疊加在一起。

背景設置rgba（92,203,218,0.5）

背景設置opacity0.5

兩個樣式疊加后的效果

問：如果子級元素設置visibility：visible而父級設置hidden會如何

答：除設置visble的正常顯示，其余都隱藏。

鳴謝

感謝大家觀看

BY :? 郭婷婷

PPT鏈接：https://ptteng.github.io/PPT/PPT/css-07-rgba.html#/

--------------------------------------------------------------------------------------------------------------------

技能樹.IT修真院

“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。

這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧?！

猛戳這里