首頁 > web前端 > css教學 > 圖文詳解CSS中rgba,rgb和opacity的區別

圖文詳解CSS中rgba,rgb和opacity的區別

yulia
發布: 2018-10-22 15:19:38
原創
6163 人瀏覽過

CSS中設定背景顏色的方式有很多,像是background-color,rgb,rgba等等,那你知道rgba,rgb和opacity的差別嗎?這篇文章就跟大家講講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>
登入後複製

效果圖:

圖文詳解CSS中rgba,rgb和opacity的區別

範例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);
   }
登入後複製

效果圖:

圖文詳解CSS中rgba,rgb和opacity的區別

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>
登入後複製

效果圖:

圖文詳解CSS中rgba,rgb和opacity的區別 
 
從效果圖中可以看出rgba,rgb和opacity之間的區別,rgb只可以設定背景顏色;rgba可以設定透明度,且透明度不會作用在裡面的元素上,opacity可以設定透明度,但透明度會作用在裡面的元素上。

以上結合實例給大家介紹了rgba,rgb和opacity三者之間的區別,初學者可以自己動手嘗試,加深印象,希望這篇文章對你有所幫助!

更多相關影片教學請造訪 CSS教學

#

以上是圖文詳解CSS中rgba,rgb和opacity的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板