CSS3中RGBA和opacity的區別

kboypkb發表於2021-09-09

RGBA是什麼?

是在RGB的基礎上增加了一個通道Alpha。Alpha引數為透明值,在0~1之間。

RGBA 不僅可以用在 background 屬性上,還可以用在 color 和 border 屬性中。

RGBA和opacity之間的不同點是前者只應用到指定的元素上,後者會影響指定的元素及其子元素。

下面透過例項演示來說明 。

效果展示:


圖片描述

rgba演示.png

<!--HTML部分--&gt
RGBA測試
opacity測試
          /*css部分*/ 
            #demo {                width: 200px;                height: 100px;                background: rgba(25, 25, 25, .5);                margin: 10px;
            }            
            #demo2 {                width: 200px;                height: 100px;                background: rgb(25, 25, 25);                opacity: .5;                margin: 10px;
            }



作者:ywyan
連結:


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/1916/viewspace-2813482/,如需轉載,請註明出處,否則將追究法律責任。

相關文章