mask-image

none

Dieses Schlüsselwort wird als transparente schwarze Bildebene interpretiert.

<mask-source>

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

<image>

Ein Bildwert, der als Maskenbildebene verwendet wird.

Die mask-image Eigenschaft bietet eine Maske, die Teile des Elements, auf das sie angewendet wird, verbirgt. Der Wert ist eine durch Kommas getrennte Liste von Maskenquellen. Jede Maskenquelle 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 in dem mask-image Eigenschaftswert nur ein Wert angegeben ist und dieser Wert none ist, wird kein Maskierungseffekt sichtbar 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 sichtbaren 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 erscheinen als transparentes Schwarz. Um URL-Bildquellen lokal zu testen, richten Sie einen lokalen Server ein.

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

• Das Maskenbild ist leer (null Breite oder 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 Maskierungsbildes selbst definiert wird. Der Modus des Maskierungsbildes 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 durch die CSS mask-type Eigenschaft oder das SVG mask-type Attribut auf alpha geändert.

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

• In allen Fällen zählt die Alpha-Transparenz der Maske; 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 ist oder darauf auflöst, zählen nur die Alpha-Kanäle der Farben; der Farbton, die Helligkeit, usw., sind unwichtig.
• Wenn die mask-mode Eigenschaft auf luminance gesetzt ist oder darauf auflöst, ist der Maskierungswert der Luminanzwert jeder Farbe multipliziert mit ihrem Alpha-Wert. Der mask-mode löst sich zu luminance auf, 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 explizit 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 Verlauf 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, der die Hälfte der Breite der Maske ist, hat, bevor sie über 10% transparent wird.

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

Ergebnisse

Der Teil des ursprünglichen Elements, der vom schwarzen Kreis maskiert wird, ist vollständig undurchsichtig und verblasst zu transparent, während die Maske zu transparent verblasst.

In diesem Beispiel ist das <mask-source>, das als unser Maskenbild verwendet wird, ein externes SVG.

HTML

Wir verwenden dasselbe Bild wie im vorherigen Beispiel. Wir haben auch das Bild, das wir als Maske verwenden werden, eingefügt; einen Stern, dessen fill-opacity 0,5 ist, oder zu 50% undurchsichtig.

<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 Opazität der angelegten Maske. Die Maske ist kleiner als das Bild und wird daher 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 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 — dieselbe halbtransparente SVG wie im vorherigen Beispiel und eine repeating-radial-gradient(). Wir steuern die Größe der Masken mit der mask-size Eigenschaft. Da unsere erste Maske nicht auf 100% skaliert ist, stellen wir sicher, dass unsere Masken zentriert sind und sich mit den Eigenschaften mask-position und mask-repeat nicht 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

Dieses Beispiel zeigt die Verwendung von SVG <mask> Elementen als Masken. In diesem Fall ist die Farbe der Maske von Bedeutung, da der mask-type Wert für SVG-Masken standardmäßig luminance 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 eine id für jedes unserer vier Bilder 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 eine andere <mask> auf jedes <img> an. Kein Teil des letzten Bildes mit dem schwarzen Füllung wird standardmäßig sichtbar sein. In diesem Fall sind, obwohl alle Farben in diesem Beispiel vollständig undurchsichtig sind, die mask-mode Voreinstellungen match-type, was in diesem Fall zu luminance führt.

#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 bzw. Dies bedeutet, dass die Bereiche, in denen die Maske weiß ist, sichtbar sind, während Bereiche, in denen die Maske schwarz oder vollständig transparent ist, abgeschnitten werden (nicht sichtbar). Bereiche, in denen die Maske grün ist, sind sichtbar, aber heller, was einer weißen Maske entspricht, die zu 46,228% undurchsichtig ist.

Ergebnisse

Aktivieren Sie das Kontrollkästchen, um den Wert des mask-mode zwischen alpha (aktiviert) und dem anfänglichen Wert, der auf luminance auflöst (deaktiviert), umzuschalten. Wenn alpha verwendet wird, spielt die Farbe der Maske keine Rolle; entscheidend ist nur die alpha-Transparenz. Wenn der Wert auf luminance auflöst, sind weiße Bereiche sichtbar, schwarze Bereiche nicht und grüne Bereiche sind sichtbar, aber mit einer Opazität, 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 Shorthand
• mask-origin
• mask-position
• mask-repeat
• mask-size
• mask-border
• clip-path
• CSS-Maskierung Modul