Παράμετρος mask του CSS

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

mask Η ιδιότητα χρησιμοποιείται για να κρύψει ή να κόψει την εικόνα (προς ορισμένο βαθμό ή πλήρως) μέσω της σκιής.

mask Η ιδιότητα είναι η σύντομη μορφή των παρακάτω ιδιοτήτων:

Επίδειξη

Παράδειγμα 1

Δημιουργούμε σκιές για τις εικόνες:

.mask1 {
  mask: url(w3logo.png) no-repeat 50% 50%;
}

Try it yourself

Παράδειγμα 2

Χρησιμοποιώντας τη γραμμική και τη ραδιενεργή σκιές δημιουργούμε διαφορετικές σκιές για τις εικόνες:

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

Try it yourself

Παράδειγμα 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>

Try it yourself

Παράδειγμα 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>

Try it yourself

CSS syntax

mask-image: mask-image mask-mode mask-repeat mask-position mask-clip mask-origin mask-size mask-composite|initial|inherit;

Attribute value

Value Description
mask-image Specify the image used as the element mask layer. The default value is none.
mask-mode

Specify whether the mask layer image should be considered as a luminance mask or an alpha mask.

The default value is match-source.
mask-repeat

Set whether and how the mask image is repeated.

The default value is repeat.
mask-position

Set the starting position of the mask image (relative to the mask position area).

The default value is 0% 0%.
mask-clip

Specify the area affected by the mask image.

The default value is border-box.
mask-origin

Specify the starting position of the mask layer image (mask position area).

The default value is border-box.
mask-size

Specify the size of the mask layer image.

The default value is auto.
mask-composite

Specify the composite operation used by the current mask layer and the layer below it.

The default value is add.
initial Set this property to its default value. See initial.
inherit Inherit this property from its parent element. See inherit.

Technical details

Default value: none match-source repeat 0% 0% border-box border-box auto add
Inheritance: No
Animation production: Not supported. See:Animation-related properties.
Version: CSS Masking Module Level 1
JavaScript syntax: object.style.mask="url(star.svg)"

Browser support

The numbers in the table represent the first browser version to fully support this property.

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

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

Εκμάθηση:Κατακάλυψη CSS

Αναφορά:Παράμετρος mask του CSS

Αναφορά:Παράμετρος mask-clip του CSS

Αναφορά:Παράμετρος mask-composite του CSS

Αναφορά:Παράμετρος mask-image του CSS

Αναφορά:Παράμετρος mask-mode του CSS

Αναφορά:Παράμετρος mask-origin του CSS

Αναφορά:Παράμετρος mask-position του CSS

Αναφορά:Παράμετρος mask-repeat του CSS

Αναφορά:Παράμετρος mask-size του CSS

Αναφορά:Παράμετρος mask-type του CSS