CSS ºÏ·¨ÑÕɫֵ
CSS ÑÕÉ«
¿ÉÒÔÓÃÒÔÏ·½·¨À´¹æ¶¨ CSS ÖеÄÑÕÉ«£º
- Ê®Áù½øÖÆÉ«
- RGB ÑÕÉ«
- RGBA ÑÕÉ«
- HSL ÑÕÉ«
- HSLA ÑÕÉ«
- Ô¤¶¨Òå/¿çä¯ÀÀÆ÷ÑÕÉ«Ãû
Ê®Áù½øÖÆÑÕÉ«
ËùÓÐä¯ÀÀÆ÷¶¼Ö§³ÖÊ®Áù½øÖÆÑÕɫֵ¡£
Ê®Áù½øÖÆÑÕÉ«ÊÇÕâÑù¹æ¶¨µÄ£º#RRGGBB£¬ÆäÖÐµÄ RR£¨ºìÉ«£©¡¢GG£¨ÂÌÉ«£©¡¢BB£¨À¶É«£©Ê®Áù½øÖÆÕûÊý¹æ¶¨ÁËÑÕÉ«µÄ³É·Ö¡£ËùÓÐÖµ±ØÐë½éÓÚ 0 Óë FF Ö®¼ä¡£
¾ÙÀý˵£¬#0000ff ÖµÏÔʾΪÀ¶É«£¬ÕâÊÇÒòΪÀ¶É«³É·Ö±»ÉèÖÃΪ×î¸ßÖµ£¨ff£©£¬¶øÆäËû³É·Ö±»ÉèÖÃΪ 0¡£
ʵÀý
p { background-color:#0000ff; }
RGB ÑÕÉ«
ËùÓÐä¯ÀÀÆ÷¶¼Ö§³Ö RGB ÑÕɫֵ¡£
RGB ÑÕɫֵÊÇÕâÑù¹æ¶¨µÄ£ºrgb(red, green, blue)¡£Ã¿¸ö²ÎÊý (red¡¢green ÒÔ¼° blue) ¶¨ÒåÑÕÉ«µÄÇ¿¶È£¬¿ÉÒÔÊǽéÓÚ 0 Óë 255 Ö®¼äµÄÕûÊý£¬»òÕßÊǰٷֱÈÖµ£¨´Ó 0% µ½ 100%£©¡£
¾ÙÀý˵£¬rgb(0,0,255) ÖµÏÔʾΪÀ¶É«£¬ÕâÊÇÒòΪ blue ²ÎÊý±»ÉèÖÃΪ×î¸ßÖµ£¨255£©£¬¶øÆäËû±»ÉèÖÃΪ 0¡£
ͬÑùµØ£¬ÏÂÃæµÄÖµ¶¨ÒåÁËÏàͬµÄÑÕÉ«£ºrgb(0,0,255) ºÍ rgb(0%,0%,100%)¡£
ʵÀý
p { background-color:rgb(255,0,0); }
RGBA ÑÕÉ«
RGBA ÑÕɫֵµÃµ½ÒÔÏÂä¯ÀÀÆ÷µÄÖ§³Ö£ºIE9+¡¢Firefox 3+¡¢Chrome¡¢Safari ÒÔ¼° Opera 10+¡£
RGBA ÑÕɫֵÊÇ RGB ÑÕɫֵµÄÀ©Õ¹£¬´øÓÐÒ»¸ö alpha ͨµÀ - Ëü¹æ¶¨Á˶ÔÏóµÄ²»Í¸Ã÷¶È¡£
RGBA ÑÕɫֵÊÇÕâÑù¹æ¶¨µÄ£ºrgba(red, green, blue, alpha)¡£alpha ²ÎÊýÊǽéÓÚ 0.0£¨Íêȫ͸Ã÷£©Óë 1.0£¨ÍêÈ«²»Í¸Ã÷£©µÄÊý×Ö¡£
ʵÀý
p { background-color:rgba(255,0,0,0.5); }
HSL ÑÕÉ«
HSL ÑÕɫֵµÃµ½ÒÔÏÂä¯ÀÀÆ÷µÄÖ§³Ö£ºIE9+¡¢Firefox¡¢Chrome¡¢Safari ÒÔ¼° Opera 10+¡£
HSL Ö¸µÄÊÇ hue£¨É«µ÷£©¡¢saturation£¨±¥ºÍ¶È£©¡¢lightness£¨ÁÁ¶È£© - ±íʾÑÕÉ«ÖùÃæ×ø±ê±íʾ·¨¡£
HSL ÑÕɫֵÊÇÕâÑù¹æ¶¨µÄ£ºhsl(hue, saturation, lightness)¡£
Hue ÊÇÉ«ÅÌÉϵĶÈÊý£¨´Ó 0 µ½ 360£© - 0 (»ò 360) ÊǺìÉ«£¬120 ÊÇÂÌÉ«£¬240 ÊÇÀ¶É«¡£Saturation ÊǰٷֱÈÖµ£»0% Òâζ×Å»ÒÉ«£¬¶ø 100% ÊÇÈ«²Ê¡£Lightness ͬÑùÊǰٷֱÈÖµ£»0% ÊǺÚÉ«£¬100% Êǰ×É«¡£
ʵÀý
p { background-color:hsl(120,65%,75%); }
HSLA ÑÕÉ«
HSLA ÑÕɫֵµÃµ½ÒÔÏÂä¯ÀÀÆ÷µÄÖ§³Ö£ºIE9+¡¢Firefox 3+¡¢Chrome¡¢Safari ÒÔ¼° Opera 10+¡£
HSLA ÑÕɫֵÊÇ HSL ÑÕɫֵµÄÀ©Õ¹£¬´øÓÐÒ»¸ö alpha ͨµÀ - Ëü¹æ¶¨Á˶ÔÏóµÄ²»Í¸Ã÷¶È¡£
HSLA ÑÕɫֵÊÇÕâÑù¹æ¶¨µÄ£ºhsla(hue, saturation, lightness, alpha)£¬ÆäÖÐµÄ alpha ²ÎÊý¶¨Ò岻͸Ã÷¶È¡£alpha ²ÎÊýÊǽéÓÚ 0.0£¨Íêȫ͸Ã÷£©Óë 1.0£¨ÍêÈ«²»Í¸Ã÷£©µÄÊý×Ö¡£
ʵÀý
p { background-color:hsla(120,65%,75%,0.3); }