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);
}

Ç××ÔÊÔÒ»ÊÔ

VUE