小編給大家分享一下圖文詳解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)設置背景顏色為紅色
<!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)設置背景顏色為半透明紅色
.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設置透明度，代碼如下：
<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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
