• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • rgb()

    rgb()函数使用红(R)、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。

    • RGB 即红色、绿色、蓝色(英语:Red, Green, Blue)。
    • 红色(R)0 到 255 间的整数,代表颜色中的红色成分。
    • 绿色(G)0 到 255 间的整数,代表颜色中的绿色成分。
    • 蓝色(B)0 到 255 间的整数,代表颜色中的蓝色成分。

    示例

    #p1 {background-color:rgb(255,0,0);} /* 红 */
    #p2 {background-color:rgb(0,255,0);} /* 绿 */
    #p3 {background-color:rgb(0,0,255);} /* 蓝 */
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持rgb()

    语法

    rgb(R,G,B)

    "rgb"后跟3个<integer>或3个<percentage>值。整数 255 相当于 100%,和十六进制符号里的 F 或 FF 。

    实例

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.box1{
    				width: 100px;
    				height: 100px;
    				
    				/*
    				 * 颜色单位:
    				 * 	在CSS中可以直接使用颜色单词来表示不同的颜色
    				 * 		红色:red
    				 * 		蓝色:blue
    				 * 		绿色:green
    				 * 也可以使用RGB值表示不同的颜色
    				 * 		-所谓RGB值指的是通过RED GREEN blud三元色
    				 * 			通过这三种颜色不同浓度,来调配出不同的颜色
    				 * 		-例子:rgb(红色的浓度,绿色的浓度,蓝色的浓度)
    				 * 			-颜色的浓度需要一个0-255之间的值,255表示最哦大,
    				 * 			-浓度也可以采用一个百分数来设置,需要一个0% -100%之间的数值
    				 * 			0%表示0
    				 * 			100%表示255
    				 * 也可以使用十六进制来表示颜色,原理和上边RGB原理一样
    				 * 		只不过使用十六进制数代替,使用三组两位的十六进制数组来表示
    				 * 		每组表示一个颜色,第一组表示红色,范围00-ff
    				 * 						第二组表示绿色,范围00-ff
    				 * 						第三组表示蓝色,范围00-ff
    				 * 		语法:#红色绿色蓝色
    				 * 		十六进制;
    				 * 		0 1 2 3 4 5 6 7 8 9 a b  d e f
    				 * 		00 - ff
    				 * 		00表示没有,相当于rgb中的0
    				 * 		ff表示最大,相当rgb中的255
    				 *      红色:
    				 * 			#ff0000
    				 * 		像这种两位重复的颜色,可以间写
    				 * 			比如:#ff0000可以写成#f00
    				 * 			#abc   #aabbcc
    				 */
    				background-color: rgb(255,50,255);
    				
    				background-color: rgb(100%,0%,0%);
    				
    				background-color: #00FFFF;
    				
    				background-color: #abc;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box1"></div>
    	</body>
    </html>
    

    上篇:Color Name

    下篇:text-fill-color