CSS 函式 - rgb()

CSS 中的rgb()函式用於使用RGB（紅、綠、藍）顏色模型定義顏色值。它允許您透過指定這三種原色的強度來指定顏色。

要新增顏色透明度，可以將可選的<alpha-value>傳遞給rgb()函式。

傳統函式rgba()是函式rgb()的別名，它們都接受相同的引數並以相同的方式執行。

可能的值

rgb()函式的函式表示法為rgb(R G B[ / A])。

R, G, B：可以包含任何表示紅色、綠色和藍色通道的格式。
- <number>：0到255之間的任何數字。
- <percentage>：0%到100%之間的任何值。
- 關鍵字 none
A：表示顏色的透明度。這是一個可選值。
- <alpha-value>：0到1之間的任何數字，其中1對應於完全不透明，0對應於完全透明。
- 關鍵字 none

由於函式表示法將其序列化為sRGB，因此紅色、綠色和藍色分量的值在序列化時會四捨五入。

語法

rgb(255 255 255) | rgb(255, 255, 255) | rgb(255 255 255 /0.5)

CSS rgb() - 數值

以下示例顯示了rgb()函式的使用，其中所有三個值都帶有和不帶有alpha值（數值）。

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-bottom: 10px;
   }
   .color-rgb-red{
      background-color: rgb(255 0 0);
   }
   .color-rgb-green{
      background-color: rgb(0 255 0);
   }
   .color-rgb-blue{
      background-color: rgb(0 0 255);
   }
   .color-rgb-alpha{
      background-color: rgba(255 0 0 /0.5);
   }
</style>
</head>
<body>
   <div class="color-rgb-red">rgb(255 0 0)</div>
   <div class="color-rgb-green">rgb(0 255 0)</div>
   <div class="color-rgb-blue">rgb(0 0 255)</div>
   <div class="color-rgb-alpha">rgba(255 0 0 /0.5)</div>
</body>
</html>

CSS rgb() - 百分比值

以下示例顯示了rgb()函式的使用，其中所有三個值都帶有和不帶有alpha值（百分比值）。

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-bottom: 10px;
   }
   .color-rgb-red {
      background-color: rgb(70% 30% 10%);
   }
   .color-rgb-comma {
      background-color: rgb(0%, 55%, 20%);
   }
   .color-rgb-blue {
      background-color: rgb(10% 10% 85%);
   }
   .color-rgb-alpha-number {
      background-color: rgba(0% 40% 50% /0.5);
   }
   .color-rgb-alpha-percent {
      background-color: rgba(70% 0% 50% /12%);
   }
   </style>
</head>
<body>
   <div class="color-rgb-red">rgb(70% 30% 10%)</div>
   <div class="color-rgb-comma">rgb(comma-separated)</div>
   <div class="color-rgb-blue">rgb(10% 10% 85%)</div>
   <div class="color-rgb-alpha-number">rgba(0% 40% 50% /0.5)</div>
   <div class="color-rgb-alpha-percent">rgba(70% 40% 50% /12%)</div>
</body>
</html>

列印頁面