Rekomendasi kursus:

Fungsi warna() CSS

Definisi dan penggunaan CSS color() Fungsi ini memungkinkan untuk menentukan warna di dalam ruang warna khusus.

Contoh

Contoh 1

Tentukan warna latar belakang di dalam ruang warna display-p3 (kecerahan 0.3):

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(display-p3 0.6 0.6 0 / .3);
}

Cuba sendiri

Contoh 2

Gunakan tatabahasa nilai relatif:

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(from blue srgb r g b / 0.4);
}

Cuba sendiri

CSS Syntax

Tatabahasa nilai absolu

color(colorspace c1 c2 c3 / A)
Nilai Penerangan
colorspace

Diperlukan. Menentukan salah satu ruang warna yang ditakrifkan sebelum ini:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

Diperlukan. Menunjukkan nilai komponen ruang warna.

Setiap nilai boleh ditulis sebagai nombor (antara 0 hingga 1), peratusan (antara 0% hingga 100%) atau kata kunci none.
/ A

Pilihan. Menunjukkan nilai garisan kecerahan warna (0 menunjukkan kecerahan sepenuhnya, 100 menunjukkan kecerahan yang tiada).

Juga boleh digunakan none (menunjukkan garisan kecerahan yang tiada).

Nilai lalai adalah 100.

Tatabahasa nilai relatif

color(from color colorspace c1 c2 c3 / A)
Nilai Penerangan
from color

Memulakan dengan kata kunci from, diikuti nilai warna asal yang menunjukkan warna.

Ini adalah warna asal yang berdasarkan warna relatif.
colorspace

Diperlukan. Menentukan salah satu ruang warna yang ditakrifkan sebelum ini:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

Diperlukan. Menunjukkan nilai komponen ruang warna.

Setiap nilai boleh ditulis sebagai nombor (antara 0 hingga 1), peratusan (antara 0% hingga 100%) atau kata kunci none.
/ A

Pilihan. Menunjukkan nilai garisan kecerahan warna (0 menunjukkan kecerahan sepenuhnya, 100 menunjukkan kecerahan yang tiada).

Juga boleh digunakan none (menunjukkan garisan kecerahan yang tiada).

Nilai lalai adalah 100.

Butir teknikal

Versi: Modul Warna CSS Level 5

Pendukung browser

Teks di dalam jadual menunjukkan versi penuh penggunaan fungsi paling awal browser.

Chrome Edge Firefox Safari Opera
111 111 113 15 97

页面相关

参考：Warna CSS