mask-image

Syntax

/* Keyword value */
mask-image: none;

/* <mask-source> value */
mask-image: url("masks.svg#mask1");

/* <image> values */
mask-image: linear-gradient(black, transparent);
mask-image: image(url("mask.png"), skyblue);

/* Multiple values */
mask-image: url("mask.png"), linear-gradient(black 25%, transparent 35%);

/* Global values */
mask-image: inherit;
mask-image: initial;
mask-image: revert;
mask-image: revert-layer;
mask-image: unset;

Werte

none

Dieses Schlüsselwort wird als ein transparentes schwarzes Bildebene interpretiert.

<mask-source>

Ein <url> Verweis auf eine <mask> oder auf ein CSS-Bild.

<image>

Ein Bildwert, der als Maskenbildebene verwendet wird.

Beschreibung

Die mask-image Eigenschaft liefert eine Maske, die Teile des Elements, auf das sie angewendet wird, verbirgt. Der Wert ist eine durch Kommas getrennte Liste von Maskenreferenzen. Jede Maskenreferenz ist ein <image>, ein <mask-source> oder das Schlüsselwort none.

Ein <image> kann jede Art von Bild sein, einschließlich generierter Bilder wie CSS-Gradienten.

Wenn nur ein Wert für die mask-image Eigenschaft angegeben ist und dieser Wert none ist, wird kein Maskeneffekt sichtbar. Wenn mehrere Werte angegeben sind, kann ein none-Wert in der Liste keinen direkten Effekt haben, jedoch werden andere mask-* Werte in derselben Listenposition auf eine transparente schwarze Maskenschicht angewendet und haben keinen visuellen Effekt.

Nur Bildquellen, die über die Protokolle HTTP und HTTPS bereitgestellt werden, werden als <image> Werte akzeptiert aufgrund der CORS Richtlinie. Lokal bereitgestellte Bilder, einschließlich relativer oder absoluter file:// Protokolle, werden nicht akzeptiert und als transparent schwarz gerendert. Um URL-Bildquellen lokal zu testen, richten Sie einen lokalen Server ein.

Eine Maske wird in folgenden Fällen als eine transparente schwarze Bildebene betrachtet, die nichts offenbart:

• Das Maskenbild ist leer (Breite oder Höhe gleich null).
• Das Maskenbild kann nicht heruntergeladen werden.
• Der Browser unterstützt das Maskenbildformat nicht.
• Das Maskenbild existiert nicht.
• Der Maskenwert verweist nicht auf ein Maskenbild.

Der Standardwert der mask-mode Eigenschaft ist match-source, was bedeutet, dass der Modus durch den Modus des Maskenbildes selbst definiert ist. Der Modus des Maskenbildes ist generell alpha, außer wenn die Maskenquelle ein SVG <mask> Element ist. In diesem Fall ist der Modus luminance, es sei denn, der Modus wird über die CSS mask-type Eigenschaft oder das SVG mask-type Attribut auf alpha geändert.

Der mask-mode Wert ist entscheidend, da er bestimmt, ob der Maskeneffekt nur von den Alphakanalwerten der Bildquelle oder von einer Kombination dieser und der Luminanz der Maske (die Helligkeit/Dunkelheit der Farben, die das mask-image bilden) abhängt:

• In allen Fällen zählt die Alphatransparenz der Maske; die Bereiche des Elements, die von undurchsichtigen Abschnitten des mask-image maskiert werden, werden gerendert, während Bereiche, die von transparenten Bildabschnitten maskiert werden, verborgen sind.
• Wenn der mask-mode Wert auf alpha gesetzt oder auf alpha aufgelöst wird, zählen nur die Alphakanäle der Farben; der Farbton, die Helligkeit usw. sind irrelevant.
• Wenn die mask-mode Eigenschaft auf luminance gesetzt oder standardmäßig luminance ist, ist der Maskenwert der Luminanzwert jeder Farbe, multipliziert mit ihrem Alphawert. Der mask-mode wird auf luminance aufgelöst, wenn er explizit auf diesen Wert gesetzt ist, oder wenn die Eigenschaft auf match-source gesetzt ist und die mask-image Quelle ein SVG <mask> ist, das seine mask-type Eigenschaft oder das mask-type Attribut nicht explizit auf alpha gesetzt hat.

Formale Definition

Formale Syntax

mask-image = 
  <mask-reference>#  

<mask-reference> = 
  none           |
  <image>        |
  <mask-source>  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<mask-source> = 
  <url>  

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

Beispiele

Verlauf als Maskenbild

In diesem Beispiel verwenden wir einen <image> Wert als Maske und definieren einen CSS radialen Verlauf als unser Maskenbild, um ein rundes Bild mit weichen Kanten zu erzeugen.

HTML

Wir integrieren ein HTML <img> Element, das auch in allen anderen Beispielen verwendet wird.

<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />

CSS

Wir verwenden die CSS radial-gradient() Funktion, um eine Maske zu erstellen, die einen schwarzen Kreis mit einem Radius, der die Hälfte der Breite der Maske beträgt, bevor sie in 10% Transparenz übergeht, generiert.

img {
  mask-image: radial-gradient(black 50%, transparent 60%);
}

Ergebnisse

Der Teil des originalen Elements, der von dem schwarzen Kreis maskiert wird, ist vollständig undurchsichtig und verblasst zu transparent, wenn die Maske transparent wird.

Bildressource als Maskenbild

In diesem Beispiel wird der <mask-source>, den wir als Maskenbild verwenden, eine externe SVG.

HTML

Wir verwenden das gleiche Bild wie im vorherigen Beispiel. Wir haben auch das Bild hinzugefügt, das wir als Maske verwenden werden; ein Stern, dessen fill-opacity 0.5 beträgt, also 50 % undurchsichtig ist.

<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />

<img
  src="https://mdn.github.io/shared-assets/images/examples/mask-star.svg"
  alt="A star" />

CSS

Wir verwenden mask-star.svg als Maskenbild auf unserem ersten Bild:

img:first-of-type {
  mask-image: url("https://mdn.github.io/shared-assets/images/examples/mask-star.svg");
}

Ergebnisse

Die Maske ist halbtransparent, weshalb die Farben nicht so lebendig sind wie im vorherigen Beispiel. Der sichtbare Teil des Bildes ist 50 % undurchsichtig; die aufgebrachte Maskenopazität. Die Maske ist kleiner als das Bild, daher wird sie standardmäßig wiederholt. Wir könnten mask-repeat verwenden, um die Wiederholung zu steuern, oder mask-size, um die Größe der Maske zu ändern, was wir im nächsten Beispiel tun.

Mehrere Masken

Dieses Beispiel zeigt die Anwendung mehrerer Masken.

<img
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />

CSS

Wir wenden zwei Masken an — die gleiche halbtransparente SVG wie im vorherigen Beispiel und einen repeating-radial-gradient(). Wir steuern die Größe der Masken mithilfe der mask-size Eigenschaft. Da unsere erste Maske nicht auf 100% dimensioniert ist, stellen wir sicher, dass unsere Masken zentriert sind und sich nicht mit den mask-position und mask-repeat Eigenschaften wiederholen.

img {
  mask-size: 95%, 100%;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-image:
    url("https://mdn.github.io/shared-assets/images/examples/mask-star.svg"),
    repeating-radial-gradient(transparent 0 5px, black 5px 10px);
}

Ergebnisse

Maskieren mit SVG <mask>

Dieses Beispiel demonstriert die Verwendung von SVG <mask> Elementen als Masken. In diesem Fall ist die Farbe der Maske wichtig, da der mask-type Wert für SVG-Masken standardmäßig auf luminance gestellt ist, was bedeutet, dass weiße undurchsichtige Bereiche (100% Luminanz) maskiert und sichtbar sind, transparente und schwarze Bereiche (0% Luminanz) abgeschnitten werden und alles dazwischen teilweise maskiert wird.

HTML

Wir haben jedem unserer vier Bilder eine id hinzugefügt und ein SVG, das eine gleiche Anzahl von <mask> Elementen enthält.

<img
  id="green"
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />
<img
  id="stroke"
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />
<img
  id="both"
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />
<img
  id="alphaMode"
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />

<svg height="0" width="0">
  <mask id="greenMask">
    <path
      d="M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
      fill="green" />
  </mask>
  <mask id="strokeMask">
    <path
      d="M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
      fill="none"
      stroke="white"
      stroke-width="20" />
  </mask>
  <mask id="bothMask">
    <path
      d="M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
      fill="green"
      stroke="white"
      stroke-width="20" />
  </mask>
  <mask id="black">
    <path
      d="M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
      fill="black" />
  </mask>
</svg>

<p>
  <label>
    <input type="checkbox" />
    Set the <code>mask-mode</code> to <code>alpha</code>.
  </label>
</p>

CSS

Wir wenden eine andere <mask> auf jedes <img> an. Kein Teil des letzten Bildes mit der black Füllung wird standardmäßig sichtbar sein. In diesem Fall sind, obwohl alle Farben, die in diesem Beispiel verwendet werden, vollständig undurchsichtig sind, die mask-mode Standardwerte auf match-type eingestellt, die sich in diesem Fall zu luminance auflösen.

#green {
  mask-image: url("#greenMask");
}
#stroke {
  mask-image: url("#strokeMask");
}
#both {
  mask-image: url("#bothMask");
}
#alphaMode {
  mask-image: url("#black");
}

body:has(:checked) img {
  mask-mode: alpha;
}

Die Luminanzwerte von black, white und green sind 0, 100 und 46.228. Dies bedeutet, dass die Bereiche, in denen die Maske weiß ist, sichtbar sein werden, während die Bereiche, in denen die Maske schwarz oder vollständig transparent ist, abgeschnitten werden (nicht sichtbar). Bereiche, wo die Maske grün ist, werden sichtbar, aber heller sein, was einer weißen Maske entspricht, die 46.228% undurchsichtig ist.

Ergebnisse

Aktivieren Sie das Kontrollkästchen, um den Wert der mask-mode zwischen alpha (aktiviert) und dem Anfangswert, der sich zu luminance auflöst (deaktiviert), umzuschalten. Wenn alpha verwendet wird, spielt die Farbe der Maske keine Rolle; es zählt nur die Alphatransparenz. Wenn der Wert sich zu luminance auflöst, sind weiße Bereiche sichtbar, schwarze Bereiche nicht und grüne Bereiche sind sichtbar, jedoch mit einer Opazität, die der Luminanz der Farbe green entspricht. Wenn mask-mode auf alpha eingestellt ist, sind die Farben gleichwertig, da sie alle vollständig undurchsichtig sind.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• mask Kurzschreibweise
• mask-origin
• mask-position
• mask-repeat
• mask-size
• mask-border
• clip-path
• background-image
• Einführung in CSS-Maskierung
• CSS mask Eigenschaften
• Verwendung mehrerer Masken deklarieren
• CSS Maskierung Modul