ການສອນ CSS ສີ

CSS ສະໜັບສະໜູນ 140 ສີຊື່ແລະຄວາມສະເຫຼີມ, RGB, RGBA, HSL, HSLA ແລະຄວາມບໍ່ປະກອບ.

RGBA ສີ

RGBA ສີກໍ່ແມ່ນຂະຫຍາຍຈາກ RGBA ສີ, ທີ່ມີສາຍຮູບສະຫຼາດ alpha - ສາຍຮູບສະຫຼາດນີ້ສະເໜີຄວາມບໍ່ປະກອບຂອງສີ.

RGBA ສີກໍ່ແມ່ນ rgba(red, green, blue, alpha)。 alpha ພະຍາດແມ່ນເປັນຈຳນວນທີ່ຢູ່ໃນຄວາມສະເຫຼີມ 0.0 (ທົດສະຫຼາກ) ຫາ 1.0 (ບໍ່ທົດສະຫຼາກ).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

ບົດສະຫຼຸບພິມການພົບພາຍໃນ RGBA ສີ:

实例

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* ສີສີແດງທີ່ມີຄວາມບໍ່ປະກອບ */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* ສີສີຂຽວທີ່ມີຄວາມບໍ່ປະກອບ */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* ສີຫຼັງທີ່ມີຄວາມບໍ່ປະກອບ */

亲自试一试

HSL ສີ

HSL ແມ່ນຄວາມສະຫຼາກສະຫຼາດ, ຄວາມສະຫຼາກສະຫຼາດ ແລະ ຄວາມສະຫຼາກສະຫຼາດ (Hue, Saturation ແລະ Lightness).

ຄວາມສະຫຼາກສະຫຼາດ HSL ກໍ່ແມ່ນ hsl(hue, saturation, lightness).

ຄວາມສະຫຼາກສະຫຼາດແມ່ນຈຸດຕັ້ງຂອງສະໝ່ອງສີ (ຈາກ 0 ຫາ 360):

  • 0 (ຫຼື 360) ແມ່ນສີສີແດງ.
  • 120 ແມ່ນສີສີຂຽວ.
  • 240 ແມ່ນສີຫຼັງ.

ຄວາມສະຫຼາກສະຫຼາດກໍ່ແມ່ນ 100% ແມ່ນສີທັງໝົດ.

ຄວາມສະຫຼາກສະຫຼາດກໍ່ແມ່ນຄວາມສະເລ່ຍສິບສອງສາມສິບ: 0% ແມ່ນສີຫຼັງ (ສີດຳ), ແລະ 100% ແມ່ນສີຂຽວ.

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

ບັນດາຕົວຢ່າງທີ່ລະບຸສີ HSL ທີ່ຫຼາຍຫຼາຍ:

实例

#p1 {background-color: hsl(120, 100%, 50%);}  /* ສີຫົວສີຫຼາຍ */
#p2 {background-color: hsl(120, 100%, 75%);}  /* ສີຫົວສີຫຼາຍ */
#p3 {background-color: hsl(120, 100%, 25%);}  /* ສີຫົວສີຫຼາຍ */
#p4 {background-color: hsl(120, 60%, 70%);}   /* ສີຟ້າສີຫົວສີຫຼາຍ */

亲自试一试

HSLA ຄູ່ມູນຄວາມສີ

HSLA ຄູ່ມູນຄວາມສີຖືກຂະຫຍາຍຈາກ HSL ຄູ່ມູນຄວາມສີທີ່ມີ alpha channel - ມັນກຳນົດຄວາມບໍ່ສະຫຼາດຂອງສີ.

ຄູ່ມູນຄວາມສີ HSLA ຖືກກຳນົດໂດຍຄວາມທີ່ຫຼາຍຫຼາຍກໍານົດ: hsla(hue, saturation, lightness, alpha)，ທີ່ alpha ມູນຄວາມບໍ່ສະຫຼາດ. alpha ມູນຄວາມບໍ່ສະຫຼາດຢູ່ລະດັບ 0.0 (ທີ່ບາງ) ແລະ 1.0 (ທີ່ບໍ່ບາງ).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

ບັນດາຕົວຢ່າງທີ່ລະບຸສີ HSLA ທີ່ຫຼາຍຫຼາຍ:

实例

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* ສີຫົວສີຫຼາຍ */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* ສີຫົວສີຫຼາຍສີຫຼາຍ */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* ສີຫົວສີຫຼາຍສີຫຼາຍ */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* ສີຟ້າສີຫົວສີຫຼາຍສີຂຽວ */

亲自试一试

ຄວາມບໍ່ສະຫຼາດ

CSS opacity ການກະກຽມອາກາດທີ່ບໍ່ສະຫຼາດຂອງປະກອບສັນຍາການບໍ່ບາງ (ສີກໍ່ບາງ ແລະ ຂໍ້ຄວາມບາງ).

opacity ຄູ່ມູນຄວາມທີ່ຕ້ອງຖືກຕາມກັບ 0.0 (ທີ່ບາງ) ແລະ 1.0 (ທີ່ບໍ່ບາງ) ແມ່ນຕົວເລກ.

rgb(255, 0, 0); opacity:0.2;
rgb(255, 0, 0); opacity:0.4;
rgb(255, 0, 0); opacity:0.6;
rgb(255, 0, 0); opacity:0.8;

请注意，上面的文本也将是透明/不透明的！

下面的例子显示了带有不透明度的不同元素：

实例

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* 带不透明度的红色 */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* 带不透明度的绿色 */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* 带不透明度的蓝色 */

亲自试一试