Προτάσεις μαθήματος:

CSS color() συνάρτηση

Ορισμός και χρήση του CSS color() Η συνάρτηση επιτρέπει την ορισμό χρώματος στον συγκεκριμένο χώρο χρώματος.

Παράδειγμα

Παράδειγμα 1

Ορίζει το χρώμα του παρασκηνίου στον χώρο χρώματος display-p3 (διαφάνεια 0.3):

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

Δοκιμάστε το شخصικά

Παράδειγμα 2

Χρήση γλώσσας τιμών σχετικών τιμών:

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

Δοκιμάστε το شخصικά

Γλώσσα CSS

Γλώσσα τιμών αμετάβλητων τιμών

color(colorspace c1 c2 c3 / A)
Τιμή Περιγραφή
colorspace

Απαιτείται. Ορίζει έναν από τους προκαθορισμένους χώρους χρώματος:

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

Απαιτείται. Προσδιορίζει την τιμή του συνιστώμενου του χώρου χρώματος.

Κάθε τιμή μπορεί να γραφτεί ως αριθμός (0 έως 1), ποσοστό (0% έως 100%) ή λέξη κλειδί none.
/ A

Προαιρετική. Προσδιορίζει την τιμή του διαφανούς καναλιού του χρώματος (0 σημαίνει πλήρως διαφανές, 100 σημαίνει πλήρως αδιαφανές).

Μπορεί επίσης να χρησιμοποιηθεί το none (προσδιορίζει μη διαφανή κανάλι).

Η προεπιλεγμένη τιμή είναι 100.

Γλώσσα τιμών σχετικών τιμών

color(from color colorspace c1 c2 c3 / A)
Τιμή Περιγραφή
from color

Ξεκινά με το κλειδί from, ακολουθούμενο από την τιμή χρώματος που εκφράζει το αρχικό χρώμα.

Αυτό είναι το αρχικό χρώμα που βασίζεται το σχετικό χρώμα.
colorspace

Απαιτείται. Ορίζει έναν από τους προκαθορισμένους χώρους χρώματος:

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

Απαιτείται. Προσδιορίζει την τιμή του συνιστώμενου του χώρου χρώματος.

Κάθε τιμή μπορεί να γραφτεί ως αριθμός (0 έως 1), ποσοστό (0% έως 100%) ή λέξη κλειδί none.
/ A

Προαιρετική. Προσδιορίζει την τιμή του διαφανούς καναλιού του χρώματος (0 σημαίνει πλήρως διαφανές, 100 σημαίνει πλήρως αδιαφανές).

Μπορεί επίσης να χρησιμοποιηθεί το none (προσδιορίζει μη διαφανή κανάλι).

Η προεπιλεγμένη τιμή είναι 100.

Τεχνικά λεπτομέρειες

Έκδοση: CSS Color Module Level 5

Υποστήριξη προγράμματος περιήγησης

Τα αριθμήματα στη τράπεζα δεδομένων δείχνουν την έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως τη συνάρτηση.

Chrome Edge Firefox Safari Opera
111 111 113 15 97

Σχετικές σελίδες

Αναφορά:Χρώματα CSS