Polecane kursy:

CSS color() funkcja

Definicja i użycie CSS color() Funkcja pozwala na określenie koloru w określonej przestrzeni kolorów.

Przykład

Przykład 1

Określ kolor tła w przestrzeni kolorów display-p3 (przezroczystość 0.3):

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

Spróbuj sam

Przykład 2

Użyj składni wartości względnych:

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

Spróbuj sam

Składnia CSS

Składnia wartości absolutnych

color(colorspace c1 c2 c3 / A)
Wartość Opis
colorspace

Wymagane. Definiuje jedną z预先定义的颜色空间：

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

Wymagane. Oznacza wartości komponentów przestrzeni kolorów.

Każda wartość może być zapisana jako liczba (od 0 do 1), procent (od 0% do 100%) lub słowo kluczowe none.
/ A

Opcjonalne. Oznacza wartość kanału przezroczystości koloru (0 oznacza całkowitą przezroczystość, 100 oznacza całkowitą nieprzezroczystość).

Można również użyć none (oznaczającego brak kanału przezroczystości).

Domyślna wartość to 100.

Składnia wartości względnych

color(from color colorspace c1 c2 c3 / A)
Wartość Opis
from color

Zaczyna się od słowa kluczowego from, po którym następuje wartość koloru oryginalnego.

To jest oryginalny kolor, na którym opiera się względny kolor.
colorspace

Wymagane. Definiuje jedną z预先定义的颜色空间：

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

Wymagane. Oznacza wartości komponentów przestrzeni kolorów.

Każda wartość może być zapisana jako liczba (od 0 do 1), procent (od 0% do 100%) lub słowo kluczowe none.
/ A

Opcjonalne. Oznacza wartość kanału przezroczystości koloru (0 oznacza całkowitą przezroczystość, 100 oznacza całkowitą nieprzezroczystość).

Można również użyć none (oznaczającego brak kanału przezroczystości).

Domyślna wartość to 100.

Szczegółowe informacje techniczne

Wersja: CSS Color Module Level 5

Obsługa przeglądarek

Tabela liczby oznacza pierwszą wersję przeglądarki, która w pełni obsługuje tę funkcję.

Chrome Edge Firefox Safari Opera
111 111 113 15 97

Strony związane

Odniesienie:Kolory CSS