Μάσκα-εικόνα - CSS-Κόλπα

A maskστο CSS κρύβει μέρος του στοιχείου στο οποίο εφαρμόζεται.

.el ( mask-image: url(star.svg); )

Ας υποθέσουμε ότι είχατε ένα στοιχείο με φωτογραφικό φόντο και ένα ασπρόμαυρο γραφικό SVG για χρήση ως μάσκα, όπως αυτό:

Θα μπορούσατε να ορίσετε την εικόνα ως background-imageκαι τη μάσκα ως mask-imageστο ίδιο στοιχείο και να αποκτήσετε κάτι σαν αυτό:

Οι μάσκες μοιράζονται πολλά κοινά με φόντα, καθώς μπορείτε να τα διαμορφώσετε, να τα τοποθετήσετε και να τα επαναλάβετε, όπως και φόντα. Δείτε τις σχετικές ιδιότητες παρακάτω. Αλλά εδώ είναι ένα άλλο ενδιαφέρον πράγμα για τις μάσκες που μοιράζονται με φόντο: μπορούν να είναι κλίσεις.

Εδώ είναι το ίδιο γραφικό φόντου, μόνο με μια linear-gradientμάσκα που το καλύπτει, το οποίο καθιστά το πάνω μέρος διαφανές εξασθενίζοντας το κάτω μέρος που δεν είναι καθόλου διαφανές:

Αυτό λειτουργεί επειδή η κορυφή του linear-gradientείναι transparent. Θα είχα υποθέσει ότι θα λειτουργούσε αν ήταν whiteόσο mask-typeήταν luminance, αλλά αυτό δεν φαίνεται να λειτουργεί σε κανένα πρόγραμμα περιήγησης για μένα.

Μιλώντας για luminanceμάσκες, αυτό δεν φαίνεται να λειτουργεί για εικόνες όπως μάσκες που έχουν μορφή raster όπως JPG.webp ή PNG για μένα. Ενημέρωση : Ο αναγνώστης Micheal Hall γράφει με μια επίδειξη όπου μπορεί να έχει σχέση με τη χρήση των ιδιοτήτων μακράς διάρκειας. Ο Firefox φαίνεται να υποστηρίζει αυτήν την ιδέα εάν χρησιμοποιείτε μόνο το στενό.

Αλλά οι μάσκες άλφα φαίνεται να λειτουργούν καλά. Όπως και στα ράστερ γραφικά που χρησιμοποιούν πραγματική διαφάνεια άλφα. Σαν αυτό:

Και μόνο για να αποδείξετε ένα σημείο, μια έγχρωμη κινούμενη εικόνα που μπορείτε να δείτε μέσω της μάσκας:

Η mask-imageιδιότητα μπορεί επίσης να χρησιμοποιηθεί απευθείας μέσα σε στοιχεία SVG. Όπως και αυτή η ελλειπτική μάσκα που έχει επίσης ένα θολό φίλτρο:

Φαίνεται ότι θα μπορούσατε να κολλήσετε αυτήν τη μάσκα SVG και να την εφαρμόσετε σε άλλα στοιχεία, mask-image: url(#mask);αλλά δεν το βρίσκω ότι λειτουργεί πραγματικά. Λειτουργεί μόνο μέσα στο SVG και έχει μια δυσάρεστη παρενέργεια της διαγραφής εντελώς μιας εικόνας εάν χρησιμοποιείται εκτός του SVG.

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

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