mask-image

none

Dieses Schlüsselwort wird als transparente schwarze Bildebene interpretiert.

<mask-source>

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

<image>

Ein Bildwert, der als Maskenbildebene verwendet wird.

Die Eigenschaft mask-image stellt eine Maske bereit, die einen Teil des Elements verbirgt, auf das sie angewendet wird. Der Wert besteht aus einer kommagetrennten Liste von Maskenreferenzen. Jede Maskenreferenz ist ein <image>, ein <mask-source> oder das Schlüsselwort none.

Ein <image> kann jeder Typ von Bild sein, einschließlich generierter Bilder wie CSS Gradients.

Wenn nur ein Wert in der mask-image Eigenschaft angegeben wird und dieser Wert none ist, wird kein Maskierungseffekt erkennbar sein. 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 HTTP- und HTTPS-Protokolle bereitgestellt werden, werden als <image> Werte aufgrund der CORS Policy akzeptiert. 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 den folgenden Fällen als transparente schwarze Bildebene gezählt, die nichts offenbart:

• Das Maskenbild ist leer (null Breite oder null Höhe).
• Das Maskenbild kann nicht heruntergeladen werden.
• Der Browser unterstützt das Maskenbildformat nicht.
• Das Maskenbild existiert nicht.
• Der Maskenwert zeigt 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 wird. Der Modus des Maskenbildes ist im Allgemeinen alpha, außer wenn die Maskenquelle ein SVG <mask>-Element ist, in welchem Fall der Modus luminance ist, es sei denn, der Modus wird über die CSS mask-type Eigenschaft oder das SVG mask-type Attribut in alpha geändert.

Der mask-mode Wert ist bedeutend, weil er bestimmt, ob der Maskierungseffekt nur von den Alphakanalwerten der Bildquelle abhängt oder von einer Kombination aus diesen und der Luminanz der Maske (die Helligkeit/Dunkelheit der Farben, aus denen das mask-image besteht):

• In allen Fällen ist die Alphatransparenz der Maske wichtig; Bereiche des Elements, die durch undurchsichtige Abschnitte des mask-image maskiert sind, werden gerendert, während Bereiche, die durch transparente Bildabschnitte maskiert sind, verborgen werden.
• Wenn der mask-mode Wert auf alpha gesetzt oder darauf aufgelöst wird, sind nur die Alphakanäle der Farben von Bedeutung; Farbton, Helligkeit usw. spielen keine Rolle.
• Wenn die mask-mode Eigenschaft auf luminance gesetzt ist oder darauf standardmäßig aufgelöst wird, ist der Maskierungswert 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 mask-type Attribut nicht auf alpha gesetzt hat.

mask-image = 
  <mask-reference>#  

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

<image> = 
  <url>       |
  <gradient>  

<mask-source> = 
  <url>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

In diesem Beispiel verwenden wir einen <image> Wert als Maske und definieren einen CSS radialen Gradient als unser Maskenbild, um ein rundes Bild mit einem weichen Rand zu erstellen.

HTML

Wir fügen ein HTML <img>-Element ein, 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 hat, der die Hälfte der Breite der Maske beträgt, bevor er über 10% transparent wird.

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

Ergebnisse

Der Teil des ursprünglichen Elements, der durch den schwarzen Kreis maskiert ist, ist vollständig undurchsichtig und wird allmählich transparent, wenn die Maske transparent wird.

In diesem Beispiel ist die verwendete <mask-source> als unser Maskenbild ein externes SVG.

HTML

Wir verwenden dasselbe Bild wie im vorherigen Beispiel. Zusätzlich haben wir das Bild eingefügt, das wir als Maske verwenden werden; ein Stern, dessen fill-opacity 0.5 ist, oder 50% Deckkraft.

<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 zu 50% undurchsichtig; die Deckraft der angewendeten Maske. Die Maske ist kleiner als das Bild, daher wird sie standardmäßig wiederholt. Wir hätten mask-repeat verwenden können, um das Wiederholen zu steuern, oder mask-size, um die Größe der Maske zu ändern, was wir im nächsten Beispiel tun.

Dieses Beispiel demonstriert das Anwenden 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% Größe eingestellt ist, sorgen wir dafür, dass unsere Masken zentriert und nicht wiederholt sind, mit den Eigenschaften mask-position und mask-repeat.

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

Dieses Beispiel zeigt die Verwendung von SVG <mask> Elementen als Masken. In diesem Fall spielt die Farbe der Maske eine Rolle, da der mask-type Wert für SVG-Masken standardmäßig auf luminance steht, 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 für jedes unserer vier Bilder eine id hinzugefügt und ein SVG, das eine entsprechende 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 auf jedes <img> eine andere <mask> an. Kein Teil des letzten Bildes mit der black-Füllung wird standardmäßig sichtbar sein. In diesem Fall, während alle in diesem Beispiel verwendeten Farben vollständig undurchsichtig sind, standardisiert der mask-mode auf match-type, was in diesem Fall zu luminance aufgelöst wird.

#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, jeweils. Dies bedeutet, dass Bereiche, in denen die Maske weiß ist, sichtbar sind, wohingegen Bereiche, in denen die Maske schwarz oder vollständig transparent ist, abgeschnitten werden (nicht sichtbar). Bereiche, in denen die Maske grün ist, werden sichtbar, aber heller sein, entsprechend einer weißen Maske, die zu 46.228% undurchsichtig ist.

Ergebnisse

Aktivieren Sie das Kontrollkästchen, um den Wert des mask-mode zwischen alpha (aktiviert) und dem Anfangswert, der zu luminance aufgelöst wird (deaktiviert), zu wechseln. Wenn alpha verwendet wird, spielt die Farbe der Maske keine Rolle; alles, was zählt, ist die Alpha-Transparenz. Wenn der Wert zu luminance aufgelöst wird, sind weiße Bereiche sichtbar, schwarze Bereiche nicht, und grüne Bereiche sind sichtbar, aber mit einer Deckkraft, die der Luminanz der Farbe grün entspricht. Wenn mask-mode auf alpha gesetzt ist, sind die Farben gleichwertig, da sie alle vollständig undurchsichtig sind.

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