Fungsi color-mix() CSS

Definisi dan penggunaan

CSS color-mix() Fungsi untuk menggabungkan dua nilai warna dalam ruang warna yang diberikan dengan proporsi yang ditentukan.

Contoh

Contoh 1

Campur dua nilai warna berdasarkan proporsi yang ditentukan dalam ruang warna hsl:

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color-mix(in hsl, hsl(125 60 90), salmon 85%);
}

Cuba sendiri

Contoh 2

Campur dua nilai warna berbeza dalam ruang warna oklab berdasarkan proporsi yang berbeza:

li:nth-child(1) {
  background-color: color-mix(in oklab, #6a5acd 0%, pink);
}
li:nth-child(2) {
  background-color: color-mix(in oklab, #6a5acd 25%, pink);
}
li:nth-child(3) {
  background-color: color-mix(in oklab, #6a5acd 50%, pink);
}
li:nth-child(4) {
  background-color: color-mix(in oklab, #6a5acd 75%, pink);
}
li:nth-child(5) {
  background-color: color-mix(in oklab, #6a5acd 100%, pink);
}

Cuba sendiri

Sintaks CSS

color-mix(color-interpolation-method, color1 %, color2 %)
Nilai Penerangan
color-interpolation-method

Diperlukan. Tentukan kaedah interpolasi warna yang akan digunakan.

ia terdiri daripada kata kunci in diikuti dengan nama ruang warna.

Dapat digunakan jenis berikut:

ruang warna persegi:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • lab
  • oklab
  • xyz
  • xyz-d50
  • xyz-d65

ruang warna koordinat ekstrema：

  • hsl
  • hwb
  • lch
  • oklch
color1 %

Diperlukan. Warna yang akan dicampur, serta persen persediaan pilihan (0% hingga 100%), digunakan untuk menentukan proporsi warna.

Nilai persen default adalah 50%.
color2 %

Diperlukan. Warna yang akan dicampur, serta persen persediaan pilihan (0% hingga 100%), digunakan untuk menentukan proporsi warna.

Nilai persen default adalah 50%.

Perincian teknikal

Versi： Modul Warna CSS Level 5

Dukungan pereka

Teks dalam tabel menunjukkan versi pereka penuh yang mendukung fungsi itu.

Chrome Edge Firefox Safari Opera
111 111 113 16.2 97

Laman berkenaan

Rujukan:Warna CSS