Warna CSS

Dukungan CSS 140 nama warna yang berbedadan nilai heksadesimal, nilai RGB, nilai RGBA, nilai HSL, nilai HSLA, serta kecerdasan cahaya.

Warna RGBA

Warna RGBA adalah ekspansi nilai warna RGB, dengan channel alpha - channel ini menentukan kecerdasan cahaya warna.

Warna RGBA ditentukan seperti ini: rgba(merah, hijau, biru, alpha)。 alpha Parameter adalah angka yang berada di antara 0.0 (sangat transparan) dan 1.0 (sangat tak transparan).

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

Contoh di bawah ini mendefinisikan warna RGBA yang berbeda:

实例

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* Merah dengan kecerdasan cahaya transparan */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* Hijau dengan kecerdasan cahaya transparan */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* Biru dengan kecerdasan cahaya transparan */

亲自试一试

Warna HSL

HSL mengacu kepada hue, kesatuan, dan kecerdasan cahaya (Hue, Saturation, serta Lightness).

Nilai warna HSL ditentukan seperti ini: hsl(hue, saturation, lightness).

Hue adalah derajat di benda warna (dari 0 hingga 360):

  • 0 (atau 360) adalah merah
  • 120 adalah hijau
  • 240 adalah biru

Kesatuan adalah nilai persen: 100% adalah warna penuh.

Kecerdasan cahaya adalah nilai persen: 0% adalah gelap (hitam), sementara 100% adalah putih.

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

Contoh di bawah ini mendefinisikan warna HSL yang berbeda:

实例

#p1 {warna latar: hsl(120, 100%, 50%);}  /* Hijau */
#p2 {warna latar: hsl(120, 100%, 75%);}  /* Hijau pucat */
#p3 {warna latar: hsl(120, 100%, 25%);}  /* Hijau tua */
#p4 {warna latar: hsl(120, 60%, 70%);}   /* Kuning pucat */

亲自试一试

Warna HSLA

Nilai warna HSLA adalah ekstensi nilai warna HSL yang memiliki channel Alpha - ia menentukan kesuburan warna.

Nilai warna HSLA ditentukan oleh parameter berikut: hsla(hue, ketinggian, kecerahan, alpha), di mana parameter alpha menentukan kesuburan. Parameter alpha adalah angka yang berada di antara 0.0 (tebalus sepenuhnya) dan 1.0 (tidak tebalus sekalipun).

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

Contoh di bawah ini mendefinisikan warna HSLA yang berbeda:

实例

#p1 {warna latar: hsla(120, 100%, 50%, 0.3);}  /* Hijau dengan kesuburan */
#p2 {warna latar: hsla(120, 100%, 75%, 0.3);}  /* Hijau pucat dengan kesuburan */
#p3 {warna latar: hsla(120, 100%, 25%, 0.3);}  /* Hijau tua dengan kesuburan */
#p4 {warna latar: hsla(120, 60%, 70%, 0.3);}   /* Kuning pucat dengan kesuburan */

亲自试一试

kesuburan

CSS kepek Pengaturan sifat mengesampingkan kesuburan elemen seluruhnya (warna latar dan teks akan ada kesuburan/tebalus).

kepek Nilai sifat mesti berada di antara 0.0 (tebalus sepenuhnya) dan 1.0 (tidak tebalus sekalipun).

rgb(255, 0, 0); kepek:0.2;
rgb(255, 0, 0); kepek: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;}  /* 蓝色不透明 */

亲自试一试