CSS mask-image ιδιότητα

Ορισμός και χρήση

mask-image Η ιδιότητα χρησιμοποιείται για να καθορίσει την εικόνα που χρησιμοποιείται ως ομαδοποίηση στο στοιχείο.

Σημείωση:Οι γραμμικές και οι ραδιοδιαγώνιες διακλαίνουσες της CSS μπορούν επίσης να χρησιμοποιηθούν ως εικόνες ομαδοποίησης.

Εγχειρίδιο

Παράδειγμα 1

Δημιουργία ομαδοποίησης εικόνας για την εικόνα:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 70%;
  mask-repeat: no-repeat;
}

Προσπαθήστε το شخصικά

Παράδειγμα 2

Δημιουργία διαφορετικών οπτικών ομαδοποιήσεων εικόνων χρησιμοποιώντας γραμμικές και ραδιοδιαγώνιες διακλαίνουσες:

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}
.mask2 {
  -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
  -webkit-mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5));
}

Προσπαθήστε το شخصικά

Παράδειγμα 3

Χρησιμοποιήστε το στοιχείο SVG <mask> για να δημιουργήσετε μια στρώση καλύψης για την εικόνα:

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

Προσπαθήστε το شخصικά

Παράδειγμα 4

Χρησιμοποιήστε το στοιχείο SVG <mask> για να δημιουργήσετε μια άλλη στρώση καλύψης για την εικόνα:

<svg width="600" height="400">
  <mask id="svgmask1">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

Προσπαθήστε το شخصικά

Γλώσσα CSS

mask-image: μηδέν|εικόνα|url()|initial|κληρονομικότητα;

Τιμή ιδιότητας

Τιμή Περιγραφή
μηδέν Προεπιλεγμένη τιμή. Δεν χρησιμοποιείται εικόνα καλύψης.
εικόνα Χρησιμοποιείται ως εικόνα καλύψης.
url() Αναφορά URL για εικόνα ή στοιχείο SVG <mask>.
initial Ρυθμίστε αυτή την ιδιότητα στην προεπιλεγμένη της τιμή. Δείτε: initial.
κληρονομικότητα Κληρονομείται αυτή η ιδιότητα από το γονικό στοιχείο. Δείτε: κληρονομικότητα.

Τεχνικά λεπτομέρειες

Προεπιλεγμένη τιμή: μηδέν
Κληρονομικότητα: Όχι
Δημιουργία κινήσεων: Δεν υποστηρίζεται. Δείτε:Αντιλήψεις κινήσεων.
Έκδοση: Μονάδα Κάλυψης CSS Level 1
Γλώσσα JavaScript: object.style.maskImage="url(star.svg)"

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

Τα αριθμήματα στη τάβλη δείχνουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως αυτή την ιδιότητα.

Τα αριθμήματα με το πρόθεμα '-webkit-' δείχνουν την πρώτη έκδοση που υποστηρίζει αυτό το πρόθεμα.

Χρωμός Αράκνειο Φαύρος Σαφάρι Οπερα
120 120 53 15.4 15 -webkit-

Σχετικές σελίδες

Εκμάθηση:CSS σκιές

Αναφορά:CSS mask ιδιότητα

Αναφορά:CSS mask-clip ιδιότητα

Αναφορά:CSS mask-composite ιδιότητα

Αναφορά:CSS mask-mode ιδιότητα

Αναφορά:CSS mask-origin ιδιότητα

Αναφορά:CSS mask-position ιδιότητα

Αναφορά:CSS mask-repeat ιδιότητα

Αναφορά:CSS mask-size ιδιότητα

Αναφορά:CSS mask-type ιδιότητα