Χρώμα φόντου - CSS-Κόλπα

Η ιδιότητα χρώματος φόντου στο CSS εφαρμόζει στερεά χρώματα ως φόντο σε ένα στοιχείο. Ακολουθεί ένα παράδειγμα:

html ( background-color: #82a43a; )

Το παράδειγμα που χρησιμοποιείται παραπάνω ( #82a43a) ονομάζεται δεκαεξαδικός κώδικας και είναι ένας από τους διάφορους τρόπους που το CSS πρέπει να αντιπροσωπεύει ένα μόνο χρώμα. Υπάρχουν διάφοροι τρόποι για να βρείτε τους σωστούς δεκαεξαδικούς κωδικούς. Όποιος έχει χρησιμοποιήσει ένα εργαλείο σχεδίασης έχει δει ένα εργαλείο επιλογής χρώματος παρόμοιο με αυτό:

Σημειώστε τον δεκαεξαδικό κώδικα στην κάτω μέση.

Οι κωδικοί Hex είναι ένας τρόπος για να δηλώσετε ένα χρώμα στο CSS. Υπάρχουν επίσης πολλά ονόματα που μπορείτε να χρησιμοποιήσετε, για παράδειγμα:

.page-wrap ( background: white; ) footer ( background: black; ) .almonds ( background: blanchedAlmond; )

Αυτά τα χρώματα δεν είναι πολύ ευέλικτα, αλλά μπορούν να είναι χρήσιμα σε μια πρέζα. Είναι πιο εύκολο να θυμηθούν από τους δεκαεξαδικούς κωδικούς και υπάρχει ένας τόνος από αυτούς.

Ένας άλλος τρόπος για να δηλώσετε ένα χρώμα είναι να χρησιμοποιήσετε RGB, RGBa, HSL ή HSLa:

#page-wrap ( background: rgba(0, 0, 0, 0.8); /* 80% Black */ ) .widget ( background: hsla(170, 50%, 45%, 1); )

Σε αντίθεση με τους δεκαεξαδικούς κωδικούς, αυτές οι τιμές επιτρέπουν διαφάνεια (άλφα), η οποία μπορεί να είναι εξαιρετικά χρήσιμη. Μάθετε περισσότερα για το RGBa ή το HSLa.

Διαδήλωση

Δείτε το χρώμα φόντου της πένας από CSS-Tricks (@ css-tricks) στο CodePen.

Σχετιζομαι με

φόντο-συνημμένο
φόντο-κλιπ
εικόνα φόντου
φόντο-προέλευση
φόντο-θέση
επανάληψη φόντου
μέγεθος φόντου

Περισσότεροι πόροι

Προδιαγραφές CSS3
MDN

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

Οι κωδικοί Hex και τα περισσότερα ονόματα χρωμάτων λειτουργούν παντού. Τα RGBa και HSLa έχουν τα δικά τους σύνολα υποστήριξης προγράμματος περιήγησης: RGBa και HSLa.