Συνάρτηση hsla() CSS

Παράδειγμα

Ορίζει διαφορετικά χρώματα HSL με αδιαφάνεια:

#p1 {background-color:hsla(120,100%,50%,0.3);} /* Πράσινη */
#p2 {background-color:hsla(120,100%,75%,0.3);} /* Χαμηλή πράσινη */
#p3 {background-color:hsla(120,100%,25%,0.3);} /* Σκούρα πράσινη */
#p4 {background-color:hsla(120,60%,70%,0.3);} /* Ελαφριά πράσινη */

Προσπάθησε να το δοκιμάσεις!

Ορισμός και χρήση

Η συνάρτηση hsla() ορίζει το χρώμα χρησιμοποιώντας το μοντέλο Hue-saturation-lightness-alpha (HSLA).

Οι τιμές χρώματος HSLA είναι επέκταση των τιμών χρώματος HSL, με κανάλι αδιαφάνειας - αυτό το κανάλι καθορίζει την αδιαφάνεια του χρώματος.

Έκδοση: CSS3

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

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

Συνάρτηση
hsla() 1.0 9.0 3.0 3.1 10.0

Γλώσσα CSS

hsla(χρώμα, ισορροπία χρωμάτων, φωτεινότητα, alpha)
Αξία Περιγραφή
χρώμα Ορίζει την κλίμακα του κύκλου των χρωμάτων (από 0 έως 360) - 0 (ή 360) είναι το κόκκινο, 120 είναι το πράσινο, 240 είναι το μπλε.
ισορροπία χρωμάτων Ορίζει την ισορροπία χρωμάτων - 0％ είναι αχνό, ενώ 100％ είναι πλήρες χρώμα (πλήρης ισορροπία).
φωτεινότητα Ορίζει τη φωτεινότητα - 0% είναι μαύρο, 50% είναι κανονικό, 100% είναι λευκό.
alpha Ορίζει έναν αριθμό αδιαφάνειας, μεταξύ 0.0 (πλήρως διαφανής) και 1.0 (πλήρως αδιαφανής).