Φόντο-κλιπ - CSS-Κόλπα

Anonim

background-clip σάς επιτρέπει να ελέγχετε πόσο μακριά εκτείνεται μια εικόνα φόντου ή ένα χρώμα πέρα ​​από την επένδυση ή το περιεχόμενο ενός στοιχείου.

.frame ( background-clip: padding-box; )

Αξίες

  • border-boxείναι η προεπιλεγμένη τιμή. Αυτό επιτρέπει στο φόντο να επεκτείνεται μέχρι το εξωτερικό άκρο του περιγράμματος του στοιχείου.
  • padding-box ψαλιδίζει το φόντο στο εξωτερικό άκρο της επένδυσης του στοιχείου και δεν το αφήνει να επεκταθεί στο περίγραμμα.
  • content-boxκλιπ το φόντο στην άκρη του πλαισίου περιεχομένου.
  • inheritεφαρμόζει τη background-clipρύθμιση του γονέα στο επιλεγμένο στοιχείο.

Επίδειξη

background-clip εξηγείται καλύτερα στη δράση, οπότε έχουμε συγκεντρώσει δύο επιδείξεις για να δείξουμε πώς λειτουργεί.

Στο πρώτο demo, κάθε div έχει μία παράγραφο μέσα του. Η παράγραφος είναι το περιεχόμενο του div. Κάθε div έχει κίτρινο φόντο και ημιδιαφανές ανοιχτό μπλε περίγραμμα 5 pixel.

Δείτε το κλιπ φόντου της πένας από CSS-Tricks (@ css-tricks) στο CodePen.

Από προεπιλογή, ή με το background-clip: border-boxσετ, το κίτρινο φόντο εκτείνεται μέχρι το εξωτερικό άκρο του περιγράμματος. Παρατηρήστε πως το περίγραμμα μοιάζει με πράσινο, λόγω του κίτρινου φόντου κάτω από αυτό.

Όταν background-clipαλλάξει σε padding-box, το χρώμα του φόντου σταματά εκεί όπου τελειώνει η επένδυση του στοιχείου. Παρατηρήστε ότι το περίγραμμα είναι μπλε επειδή το φόντο δεν επιτρέπεται να ξεσπά στο περίγραμμα.

Με background-clip: content-box, το χρώμα φόντου ισχύει μόνο για το περιεχόμενο του div, στην περίπτωση αυτή το στοιχείο της παραγράφου. Η επένδυση και το περίγραμμα του div δεν έχουν χρώμα φόντου. Ωστόσο, υπάρχει μια μικρή λεπτομέρεια που αξίζει να αναφερθεί: το χρώμα επεκτείνεται στο περιθώριο του περιεχομένου. Ελέγξτε τις διαφορές μεταξύ του πρώτου και του δεύτερου παραδείγματος με content-box.

Στο πρώτο content-boxπαράδειγμα, τα προεπιλεγμένα περιθώρια του προγράμματος περιήγησης εφαρμόζονται στην παράγραφο και τα κλιπ φόντου μετά το περιθώριο. Στο δεύτερο παράδειγμα, το περιθώριο ορίζεται στο 0 στο CSS και το φόντο περικόπτεται στην άκρη του κειμένου.

Αυτό το επόμενο διαδραστικό δείχνει background-clipμε μια εικόνα φόντου. Το περιεχόμενο σε αυτό το demo είναι ένα μικρότερο κενό div.

Δείτε το διαδραστικό παράδειγμα Pen-clip του στυλό από τον Timothy Miller (@tjacobdesign) στο CodePen.

Αυτή η επίδειξη ισχύει επίσης background-size: coverκαι background-repeat: no-repeatεκτός από background-clipτον έλεγχο της εικόνας φόντου, η οποία διαφορετικά θα επαναλαμβανόταν μέχρι το απόκομμα.

Κείμενο

Υπάρχει μια έκδοση προ-προμηθευτή αυτού που λειτουργεί για την αποκοπή ενός φόντου σε κείμενο. Για να δει αυτό το έργο, το κείμενο θα πρέπει επίσης να είναι διαφανές. Ευτυχώς, υπάρχει μια άλλη ιδιότητα χρώματος κειμένου με προκαθορισμένο προμηθευτή που μπορεί να παρακάμψει αποτελεσματικά color, καθιστώντας την ασφαλή στη χρήση, καθώς μπορεί να έχει εναλλακτικό:

.background-clip-text ( /* if we can clip, do it */ -webkit-text-fill-color: transparent; -webkit-background-clip: text; /* what will show through the text ~ or ~ what will be the background of that element */ background: whatever; /* fallback text color ~ or ~ the actual color of text, so it better work on the background */ color: red; )

Το Firefox, το Chrome και το Safari το υποστηρίζουν.

Δείτε το
κείμενο Pen Lit του Chris Coyier (@chriscoyier)
στο CodePen.

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

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

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

  • background-clip στις προδιαγραφές CSS3
  • φόντο-κλιπ στο MDN
  • Το μοντέλο CSS Box

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

Ολα ΕΝΤΑΞΕΙ!

Χρώμιο Σαφάρι Firefox ΛΥΡΙΚΗ ΣΚΗΝΗ ΙΕ Android iOS
1+ 3+ 4+ 10.5+ 9+ 4.1+ Εργα