CSS Masks

Mit CSS-Maskierung können Sie eine Maskierungsschicht erstellen und auf dem Element platzieren, um bestimmte Teile des Elements teilweise oder vollständig zu verbergen.

mask-image-Eigenschaft

CSS mask-image bestimmt das Maskierungsimage der Schicht.

Das Maskierungsimage kann PNG-Image, SVG-Image,CSS-Verlauf oder SVG <mask>-Element.

Browserunterstützung

Die in der folgenden Tabelle aufgeführten Ziffern geben die erste Version an, die die Eigenschaft vollständig unterstützt.

mit -webkit- Die vorangestellten Ziffern geben die erste Version an, die die Präfixe unterstützt.

Verwenden Sie ein Bild als Maskierungsschicht

Um PNG- oder SVG-Images als Maskierungsschicht zu verwenden, verwenden Sie url() Wertübergabe der Maskierungsschichtimage.

Das Maskierungsimage muss eine transparente oder halbtransparente Fläche haben. Schwarz bedeutet vollkommen transparent.

Dies ist das Maskierungsimage, das wir verwenden werden (PNG-Datei):

Dies ist das Bild von den fünf Fischerdörfern in Italien:

Nun werden wir das Maskierungsimage (obenstehende PNG-Datei) als Maskierungsschicht für das Bild der fünf Fischerdörfer in Italien anwenden:

Beispiel

Hier ist der Quellcode:

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

Try It Yourself

Beispiel

mask-image bestimmt das Bild, das als Maskierungsebene für das Element verwendet wird.

mask-repeat bestimmt, ob und wie die Maskierungsbilder wiederholt oder wiederholt werden. Der Wert no-repeat bedeutet, dass die Maskierungsbilder nicht wiederholt werden (die Maskierungsbilder werden nur einmal angezeigt).

eine andere Eigenschaft

Wenn wir mask-repeat Die Eigenschaft, dass die Maskierungsbilder auf dem gesamten Bild von Wuyancun wiederholt angezeigt werden:

Beispiel

Hier ist der Quellcode:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
}

Try It Yourself

Verwenden Sie einen Farbverlauf als Maskierungsebene

CSS lineare und radiale Farbverläufe können auch als Maskierungsbilder verwendet werden.

Beispiel eines linearen Farbverlaufs

Hier verwenden wir einen linearen Farbverlauf als Maskierungsebene für das Bild. Dieser lineare Farbverlauf geht von der Oberseite (schwarz) zur Unterseite (transparent):

Beispiel

Verwenden Sie einen linearen Farbverlauf als Maskierungsebene:

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}

Try It Yourself

Hier verwenden wir eine lineare Farbverlaufsmaskierung und Textmaskierung als Maskierungsebene für das Bild:

Beispiel

Verwenden Sie eine lineare Farbverlaufsmaskierung und Textmaskierung als Maskierungsebene:

.mask1 {
  max-width: 600px;
  height: 350px;
  overflow-y: scroll;
  background: url(wuhan.jpg) no-repeat;
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient (black, transparent);
}

Try It Yourself

Beispiel eines radialen Farbverlaufs

Hier verwenden wir einen radialen Farbverlauf (in Form eines Kreises) als Maskierungsebene für das Bild:

Beispiel

Verwenden Sie einen radialen Farbverlauf als Maskierungsebene (kreisförmig):

.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%);
}

Try It Yourself

Hier verwenden wir einen radialen Farbverlauf (Form: Oval) als Überlagerung für das Bild:

Beispiel

Verwenden Sie eine andere radialen Farbverlauf als Überlagerung (Oval):

.mask3 {
  -webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

Try It Yourself

SVG als Überlagerung verwenden

Das SVG <mask>-Element kann im SVG-Graphikinhalt verwendet werden, um Überlagerungseffekte zu erzeugen.

Hier verwenden wir das SVG <mask>-Element, um verschiedene Überlagerungen für das Bild zu erstellen:

Beispiel

Eine SVG-Überlagerung (Form: Dreieck):

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask1)"></image>
</svg>

Try It Yourself

Beispiel

Eine SVG-Überlagerung (Form: Stern):

<svg width="600" height="400">
  <mask id="svgmask2">
    <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="wuhan.jpg" mask="url(#svgmask2)"></image>
</svg>

Try It Yourself

Beispiel

Eine SVG-Überlagerung (Form: Kreis):

<svg width="600" height="400">
  <mask id="svgmask3">
    <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="wuhan.jpg" mask="url(#svgmask3)"></image>
</svg>

Try It Yourself