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

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

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 >

输出如下:

CSS | rgb()函数1

支持的浏览器:下面列出了rgb()函数支持的浏览器:

  • Chrome 1.0及以上
  • Internet Explorer 4.0及更高版本
  • Firefox 1.0及更高版本
  • Safari 1.0及更高版本
  • Opera 3.5及更高版本

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: