CSS如何使用rgb()函数？用法示例

2021年3月31日12:07:12 发表评论 813 次浏览

rgb()函数是CSS中的内置函数, 用于使用Red Green Blue(RGB)模型定义颜色。

语法如下：

rgb( red, green, blue )

参数：此函数接受上述和以下描述的三个参数：

红：此参数用于定义红色的强度。它是介于0到255之间的整数值, 或者是介于0％到100％之间的百分比值。
绿色：此参数用于定义绿色的强度。它是介于0到255之间的整数值, 或者是介于0％到100％之间的百分比值。
蓝色：此参数用于定义蓝色的强度。它是介于0到255之间的整数值, 或者是介于0％到100％之间的百分比值。

下面的程序说明了CSS中的rgb()函数：

程序：

<!DOCTYPE html>
< html >
     < head >
         < title >rgb function</ title >
         < style > 
             .gfg1 {
                 background-color:rgb(1, 153, 0);
                 text-align:center;
             }
             .gfg2 {
                 background-color:rgb(0, 255, 0);
                 text-align:center
             }
             .gfg3 {
                 background-color:rgb(133, 150, 150);
                 text-align:center
             }
             .gfg {
                 font-size:40px;
                 font-weight:bold;
                 color:green;
                 text-align:center;
             }
             h1 {
                 text-align:center;
             }
         </ style >
     </ head >
     < body >
         < div class = "gfg" >lsbin</ div >
         < h1 >The rgb() Function</ h1 >
         < p class = "gfg1" >Green</ p >
         < p class = "gfg2" >Light green</ p >
         < p class = "gfg3" >Light black</ p >
     </ body >
</ html >

输出如下：