Η shape-image-threshold
ιδιότητα CSS ορίζει ποια εικονοστοιχεία περιλαμβάνονται στο σχήμα μιας εικόνας όταν shape-outside
χρησιμοποιείται για τον καθορισμό της περιοχής πλωτήρα ενός στοιχείου CSS.
Ας υποθέσουμε ότι χρησιμοποιούμε μια γραμμική κλίση για να καθορίσουμε την περιοχή πλωτήρα ενός σχήματος CSS. Κάτι έτσι πηγαίνουμε από ένα συμπαγές χρώμα σε διαφανές υπό γωνία 45 °:
Κανονικά, θα το ορίσαμε ως background-image
στοιχείο. Εάν επιπλέουμε αυτό το στοιχείο και ρίξουμε λίγο περιεχόμενο δίπλα του, η κλίση και το περιεχόμενο θα κάθονταν δίπλα-δίπλα.
Αλλά αν ανταλλάξετε background-image
για shape-outside
, θα βλέπετε πλέον την κλίση, αλλά το τυλίγει το περιεχόμενο γύρω από αυτό όπου τα pixels στην κλίση είναι διαφανείς.
Αλλά ας πούμε ότι πιστεύουμε ότι το κείμενο πρέπει να αγκαλιάζει λίγο το σχήμα. Εκεί μπορούμε να φτάσουμε shape-image-threshold
. Μπορούμε να το χρησιμοποιήσουμε για να προσαρμόσουμε το σημείο όπου το περιεχόμενο τυλίγεται φυσικά γύρω από τα διαφανή pixel, συμπεριλαμβάνοντας pixel που είναι ημιδιαφανή. Για παράδειγμα, μια shape-image-threshold
τιμή 0,3 θα περιλαμβάνει εικονοστοιχεία που είναι περισσότερο από 30% αδιαφανή στην περιοχή πλωτήρα του σχήματος.
Αυτή τη φορά, θα συμπεριλάβουμε την κλίση για να δούμε πώς λειτουργεί.
Δες αυτό? Δηλώνοντας shape-image-threshold
σχετικά με το δεύτερο σχήμα και ορίζοντάς το σε τιμή 0,15, συμπεριλάβαμε εικονοστοιχεία που είναι μεγαλύτερα από 15% αδιαφανή στην περιοχή πλωτήρα, επιτρέποντας στο περιεχόμενο να επικαλύπτει το σχήμα με smidge.
Αυτό λειτουργεί επίσης όταν ορίζουμε το εξωτερικό σχήμα με ένα πραγματικό αρχείο εικόνας που χρησιμοποιεί διαφάνεια. Ίδια συμφωνία, με διαφορετικό σχήμα για να δουλέψετε.
Σύνταξη
.logo ( shape-outside: url(/path/to/image.png.webp); shape-image-threshold: .6; )
- Ισχύει για: floats
- Κληρονομική: όχι
- Αρχική τιμή: 0,0
- Τύπος κινούμενης εικόνας: αριθμός
Αξίες
Η shape-image-threshold
ιδιότητα δέχεται μία τιμή άλφα μεταξύ 0 και 1, όπου το 0 είναι το ισοδύναμο ενός επιπέδου αδιαφάνειας 0% (πλήρως διαφανές) και 1 είναι το ισοδύναμο ενός επιπέδου αδιαφάνειας 100% (χωρίς διαφάνεια). Η αρχική τιμή είναι 0,0.
Υποστήριξη προγράμματος περιήγησης
ΙΕ | Ακρη | Firefox | Χρώμιο | Σαφάρι | ΛΥΡΙΚΗ ΣΚΗΝΗ |
---|---|---|---|---|---|
Οχι | 79+ | 62+ | 37+ | 10.1+ | 24+ |
Android Chrome | Android Firefox | Πρόγραμμα περιήγησης Android | iOS Safari | Opera Mini |
---|---|---|---|---|
84+ | 68+ | 81+ | 10.3+ | Ολα |
Περισσότερες πληροφορίες
- Προδιαγραφή επιπέδου 1 ενότητας CSS Shapes (Πρόχειρο συντάκτη)
- Τεκμηρίωση MDN