Κλειδιά Χρώματος CSS

Αυτό το κεφάλαιο θα εξηγήσει transparent、currentcolor και κληρονομημένο Λέξη-κλειδί.

Λέξη-κλειδί transparent

transparent Η λέξη-κλειδί χρησιμοποιείται για να κάνει το χρώμα διαφανές. Χρησιμοποιείται συνήθως για να ρυθμίσει διαφανές χρώμα παρασκηνίου στο στοιχείο.

Παράδειγμα

Σε αυτό το παράδειγμα, το χρώμα του παρασκηνίου του στοιχείου <div> θα είναι πλήρως διαφανές και θα εμφανιστεί η εικόνα του παρασκηνίου:

body {
  background-image: url("paper.gif");
}
div {
  background-color: transparent;
}

Δοκιμάστε το προσωπικά

Σημείωση:transparent Η λέξη-κλειδί είναι ίση με rgba(0,0,0,0)Η τιμή χρώματος RGBA είναι επέκταση της τιμής χρώματος RGB, με αλφα κανάλι - αυτό καθορίζει την αδιαφάνεια του χρώματος. Περισσότερες πληροφορίες θα βρείτε在我们的 CSS RGB Κεφάλαια και Χρώματα CSS Κεφάλαιο.

Λέξη-κλειδί currentcolor

currentcolor Η λέξη-κλειδί μοιάζει με μια μεταβλητή, η οποία αποθηκεύει την τρέχουσα τιμή της ιδιότητας color του στοιχείου.

Αν θέλετε να διατηρήσετε ένα συγκεκριμένο χρώμα συνεπές σε στοιχεία ή σελίδα, αυτή η λέξη-κλειδί θα είναι πολύ χρήσιμη.

Παράδειγμα

Σε αυτό το παράδειγμα, το χρώμα του περιγράμματος του στοιχείου <div> θα είναι μπλε, επειδή το χρώμα του κειμένου του στοιχείου <div> είναι μπλε:

div {
  color: blue;
  border: 10px solid currentcolor;
}

Δοκιμάστε το προσωπικά

Παράδειγμα

Σε αυτό το παράδειγμα, το χρώμα του παρασκηνίου του <div> ορίζεται ως η τρέχουσα τιμή χρώματος του στοιχείου body:

body {
  color: purple;
}
div {
  background-color: currentcolor;
}

Δοκιμάστε το προσωπικά

Παράδειγμα

Σε αυτό το παράδειγμα, η χρώση του περιβλήματος και η χρώση της σκιάς του <div> ρυθμίζονται ως η τρέχουσα τιμή χρώματος του στοιχείου body:

body {
 color: green;
}
div {
  box-shadow: 0px 0px 15px currentcolor;
  border: 5px solid currentcolor;
}

Δοκιμάστε το προσωπικά

κλειδί κληρονομημένου

κληρονομημένο Το κλειδί καθορίζει ότι η ιδιότητα θα κληρονομηθεί από το γονικό στοιχείο.

κληρονομημένο Τα κλειδιά μπορούν να χρησιμοποιηθούν για οποιαδήποτε ιδιότητα CSS και μπορούν να χρησιμοποιηθούν για οποιοδήποτε στοιχείο HTML.

Παράδειγμα

Σε αυτό το παράδειγμα, η ρύθμιση του περιβλήματος του <span> κληρονομείται από το γονικό στοιχείο:

div {
  border: 2px solid red;
}
span {
  border: κληρονομημένο;
}

Δοκιμάστε το προσωπικά