Html 简明教程

HTML - RGB and RGBA Colors

所有浏览器都支持 HTML RGB 和 RGBA 颜色。 RGB 颜色值表示颜色中红色、绿色和蓝色的强度。 RGBA 是 RGB 的扩展，还为颜色的不透明度指定了一个 alpha 通道。

我们可以使用红色、绿色和蓝色的组合来制作任何颜色。如果你设置所有三种颜色的最大强度，则最终颜色将为白色。同样，如果我们为所有 RGB 值提供零强度，我们将获得黑色。

RGB Color Values

在 HTML 中，可以使用以下函数定义颜色。

rgb(red, green, blue)

rgb() 函数采用三个参数，分别是红色值、绿色值和蓝色值。每个值使用 0 到 255 之间的整数指定，其中 0 表示没有颜色，而 255 表示全彩强度。混合这些值将创建其他不同颜色。

RGBA Color Values

在 HTML 中，可以使用 rgba 函数定义 RGBA 颜色。

rgb(red, green, blue, alpha)

rgba() 函数采用四个参数。alpha 参数接受 0 到 1 之间的小数，以确定 RGB 颜色的不透明度。值 0 表示颜色不可见，值 1 表示颜色完全可见。

例如，rgba(255, 0, 0, 1.0) 是完全不透明的红色，rgba(255, 0, 0, 0.5) 是半透明红色，rgba(255, 0, 0, 0.0) 是完全透明的红色。

Comparison of RGB & RGBA Colors

以下列出了几个使用 RGB 值表示的颜色及其使用 RGBA 函数实现的透明度降低的示例。

RGB Color

RGB function

RGBA Color

RGBA function

rgb(0, 0, 0)

rgba(0, 0, 0, 0.7)

rgb(255, 0, 0)

rgba(255, 0, 0, 0.7)

rgb(0,255,0)

rgba(0, 255, 0, 0.7)

rgb(0, 0, 255)

rgba(0, 0, 255, 0.7)

rgb(255, 255, 0)

rgba(255, 255, 0, 0.7)

rgb(0, 255, 255)

rgba(0, 255, 255, 0.7)

rgb(255, 0, 255)

rgba(255, 0, 255, 0.7)

rgb(192, 192, 192)

rgba(192, 192, 192, 0.7)

rgb(255, 255, 255)

rgba(255, 255, 255, 0.7)

Examples of HTML RGB and RGBA Colors

以下是几个使用 HTML 中的 rgb 和 rgba 函数的示例。

HTML RGB Colors

这里有一个使用 rgb() 值通过颜色代码设置 HTML 标记背景的示例。

<!DOCTYPE html>
<html>

<head>
   <title>HTML Colors by RGB Code</title>
</head>

<body style="background-color: rgb(255,255,0);">
   <p>
      Use different color code for body and
      table and see the result.
   </p>
   <table style="background-color: rgb(0,0,0);">
      <tr>
         <td>
            <p style="color: rgb(255,255,255);">
               This text will appear white on
               black background.
            </p>
         </td>
      </tr>
   </table>

</body>
</html>

HTML RGBA Colors

在此示例中，我们使用 rgba 颜色代码设置了背景颜色和文本颜色。

<!DOCTYPE html>
<html>
<head>
   <style>
      div{
            border: 1px solid;
            height: 30px;
            font-weight: bold;
      }
   </style>
</head>

<body>
   <h2>RGBA Color variations</h2>
   <div style =
         "background-color: rgba(255, 0 ,0 ,1);">
      opacity 1.0
   </div>
   <div style =
         "background-color: rgba(255, 0 ,0 ,0.9);">
      opacity 0.9
   </div>
   <div style =
         "background-color: rgba(255, 0 ,0 ,0.8);">
      opacity 0.8
   </div>
   <div style =
         "background-color: rgba(255, 0 ,0 ,0.7);">
      opacity 0.7
   </div>
   <div style =
         "background-color: rgba(255, 0 ,0 ,0.6);">
      opacity 0.6
   </div>
   <div style =
         "background-color: rgba(255, 0 ,0 ,0.5);">
      opacity 0.5
   </div>
   <div style =
         "background-color: rgba(255, 0 ,0 ,0.4);">
      opacity 0.4
   </div>
   <div style =
         "background-color: rgba(255, 0 ,0 ,0.3);">
      opacity 0.3
   </div>
   <div style =
         "background-color: rgba(255, 0 ,0 ,0.2);">
      opacity 0.2
   </div>
   <div style =
         "background-color: rgba(255, 0 ,0 ,0.1);">
      opacity 0.1
   </div>
   <div style =
         "background-color: rgba(255, 0 ,0 ,0.0);">
      opacity 0.0
   </div>

</body>
</html>