溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS中rgba，rgb和opacity間的區別是什么”，在日常操作中，相信很多人在CSS中rgba，rgb和opacity間的區別是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS中rgba，rgb和opacity間的區別是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
rgb和rgba的區別：
rgb就是指紅色（red），綠色（green）、藍色（blue），取值在0到255之間，比如：黑色可以表示為rgb(0,0,0)
rgba是指紅色（red），綠色（green）、藍色（blue），透明度（opacity），透明度的取值在0到1 之間
rgba和rgb的區別在于，rgba可以設置背景顏色的透明度，rgb不可以
舉例1：用 background: rgb(255,0,0)設置背景顏色為紅色
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .a1{ width: 300px; height: 200px; position: relative; border: 1px solid black; } .a2{ width: 200px; height: 100px; position: absolute; top: 50px; left: 50px; background: rgb(255,0,0); } </style> </head> <body> <div class="a1"></div> <div class="a2"></div> </body> </html> |
效果圖：
舉例2：用background: rgba(255,0,0,0.5)設置背景顏色為半透明紅色
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .a1{ width: 300px; height: 200px; position: relative; border: 1px solid black; } .a2{ width: 200px; height: 100px; position: absolute; top: 50px; left: 50px; background: rgba(255,0,0,0.5); } |
效果圖：
rgba()和opacity的區別：
兩者都可以設置透明效果，但是opacity屬性會作用于元素和元素里面的所有元素，比如子元素，rgba只會作用于它本身，不會作用于子元素上，具體區別請對比效果圖。
舉例3： 用opacity: 0.5設置透明度，代碼如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <style type="text/css"> .a1{ width: 300px; height: 200px; position: relative; border: 1px solid black; } .a2{ width: 200px; height: 100px; position: absolute; top: 50px; left: 50px; background: red; opacity: 0.5; } </style> <body> <div class="a1"></div> <div class="a2">我是盒子里面的內容，文字不需要透明</div> </body> |
效果圖：
從效果圖中可以看出rgba，rgb和opacity之間的區別，rgb只可以設置背景顏色；rgba可以設置透明度，且透明度不會作用在里面的元素上，opacity可以設置透明度，但透明度會作用在里面的元素上。
到此，關于“CSS中rgba，rgb和opacity間的區別是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
