CSS 函数

CSS 中的 rgb() 函数用于使用 RGB(红、绿、蓝)颜色模型定义颜色值。它允许您通过指定这三种基色中每种颜色的强度来指定颜色。

要添加颜色透明度,可以将可选的 <alpha-value> 传递给 rgb() 函数。

旧函数 rgba() 是函数 rgb() 的别名,它们都接受相同的参数并以相同的方式运行。

可能的值

rgb() 函数的函数符号为 rgb(R G B[ / A])。

  • R, G, B:可以包含任何格式,分别代表红色、绿色和绿色通道:

    • <number>:0 到 255 之间的任何数字。

    • <percentage>:0% 到 100% 之间的任何值。

    • keyword none

  • A:表示颜色的透明度。它是一个可选值。

    • <alpha-value>:0 到 1 之间的任何数字,其中 1 对应于完全不透明,0 对应于完全透明。

    • keyword 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>