Σχήμα-εικόνα-κατώφλι - CSS-Κόλπα

Anonim

Η 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+
Πηγή: caniuse
Android Chrome Android Firefox Πρόγραμμα περιήγησης Android iOS Safari Opera Mini
84+ 68+ 81+ 10.3+ Ολα

Περισσότερες πληροφορίες

  • Προδιαγραφή επιπέδου 1 ενότητας CSS Shapes (Πρόχειρο συντάκτη)
  • Τεκμηρίωση MDN