RGBA 與 opacity不得不說的故事

2021-07-27 18:12:55 字數 920 閱讀 1856

css中rgba和opacity有著不同的使用情景和使用方法,但是有時候也有著相同的效果和功效,

相同:都可以改變透明度,

不同點:在mdn上opacity是這樣介紹的:

當opacity屬性的值應用於某個元素上時,是把這個元素(包括它的內容)當成乙個整體看待,即使這個值沒有被子元素繼承。因此,乙個元素和它包含的子元素都會具有和元素背景相同的透明度,哪怕這個元素和它的子元素有不同的opacity屬性值。

這句話是什麼意思那?

1、opacity在某個元素上時,那個就會作用於某個元素,

2、opacity會左右其子元素的透明度,不論他的子元素的透明度是多少,都會擁有和父元素相同的透明度

例如:

111

其實即便是裡面的元素是不透明的,但是奈何父元素是透明的這樣子元素也不會顯示;

rgba 在mdn上

顏色可以使用rgba()函式符在紅-綠-藍-阿爾法(rgba)模式下被定義。rgba 擴充套件了 rgb 顏色模式,它包含了阿爾法通道,允許設定乙個顏色的透明度。

a 表示透明度:0=透明;1=不透明;

他倆的最大的區別就是rgba只是對顏色通道進行了操作,並不會操作dom的東西,

舉個例子:

當我們需要對乙個div的背景進行透明度的設定,用opacity會將div裡面的所有的子元素都變成相同的透明度,而raba則只會對背景的顏色做調整,所以,在寫透明度的時候,我們要三思後行;

rgba與opacity的異同

相同之處 都可以實現改變元素的透明度 不同之處 rgba opacity 影響範圍 自身自身 後代元素 使用範圍 實現背景透明,文字不透明 使用方法 rgba r,g,b,a opacity value inherit rgba只會改變自身透明度,而opacity除了改變自身透明度外,其所有後代還會...

不得不寫點VB程式

此種方式是以行為單位進行讀取的基本單位,主要應用的方法和函式有open,close,line input,freefile,eof等。下面先簡述其功能然後結合 示例進行說明。open 顧名思義,它的作用是開啟檔案,換而言之開啟某個檔案就是獲得某個的控制權,一般情況下當檔案處於開啟狀態時只有開啟者才能...

關於基礎,不得不說

最近遇到好多問題,都與基本概念相關。忍不住,就想多說幾句。研究生面試,我出了乙個問題,乙個100khz的方波訊號,幅度大約是幾伏的數量級,想測量其有效值,用什麼儀器,怎麼測?多數學生一臉茫然,搞的我不好意思,慚愧題目是不是太難了。我急了,問學生,乙個1.5v的電池,其電壓有效值是多少?學生問我,直流...