CSS/Eigenschaften/Anzeige/mask

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der CSS-Eigenschaft mask können Sie eine Schablone anlegen, die dann nur Teilbereiche einer beliebigen Form oder Grafik teilweise oder ganz sichtbar macht.[1] Anders als bei clip-path sind dabei auch weiche Übergänge möglich.

  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

Details: caniuse.com

Der Titel dieses Artikels ist mehrdeutig. Das gleichnamige SVG-Element finden Sie unter: SVG/Masken.



mask[Bearbeiten]

Die Eigenschaft mask ist eine Zusammenfassung der möglichen Einzelangaben mask-origin, mask-clip und mask-border.

  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari
Beispiel ansehen …
.linear {
	-webkit-mask-image: linear-gradient(black 0%, transparent 100%); 
	mask-image: linear-gradient(black 0%, transparent 100%); 
}
.radial { 
	mask: radial-gradient( black 40%, transparent 70%);
	}
.stern {
	-webkit-mask: url(https://wiki.selfhtml.org/images/5/56/Deutschland-Umriss.svg#maskelement); 
	-webkit-mask-size: 95%; 
	-webkit-mask-repeat: no-repeat;
	mask-image: url(https://wiki.selfhtml.org/images/5/56/Deutschland-Umriss.svg#maskelement); 
	 mask-size: 95%;
	 mask-repeat: no-repeat;
}

img:hover {
	-webkit-mask: none;
	mask: none;
}


mask-origin[Bearbeiten]

Die Eigenschaft mask-origin legt die Position der Geometrie-Box der Maske (mask positioning area) fest.

Wenn das zu maskierende Element ein HTML-Element ist, sind folgende Schlüsselwerte möglich:

  • margin-box
  • border-box: Standardwert
  • padding-box
  • content-box

Wenn die Grundformen mit mask auf ein SVG-Element angewandt werden, kann die Geometrie-Box folgende Werte annehmen:

  • fill-box
  • stroke-box
  • view-box – falls keine viewBox festgelegt ist, wird die nächstgelegene Viewbox verwendet. Falls eine ViewBox festgelegt ist, wird das Koordinatensystem dieser ViewBox verwendet.
Beispiel
Beispiel folgt

mask-clip[Bearbeiten]

Die Eigenschaft mask-clip legt die Position des zu maskierenden Elements (mask painting area) fest.

Wenn das zu maskierende Element ein HTML-Element ist, sind folgende Schlüsselwerte möglich:

  • margin-box
  • border-box: Standardwert
  • padding-box
  • content-box

Wenn die Grundformen mit mask auf ein SVG-Element angewandt werden, kann die Geometrie-Box folgende Werte annehmen:

  • fill-box
  • stroke-box
  • view-box – falls keine viewBox festgelegt ist, wird die nächstgelegene Viewbox verwendet. Falls eine ViewBox festgelegt ist, wird das Koordinatensystem dieser ViewBox verwendet.


mask-border[Bearbeiten]

Die Eigenschaft mask-border ist eine Zusammenfassung der möglichen Einzelangaben mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat und mask-border-mode.

mask-border-source[Bearbeiten]

mask-border-slice[Bearbeiten]

mask-border-width[Bearbeiten]

mask-border-outset[Bearbeiten]

mask-border-repeat[Bearbeiten]

mask-border-mode[Bearbeiten]

Referenzieren einer Maske[Bearbeiten]

  • Leer
  • Firefox
  • Leer
  • Leer
  • Leer

Details: caniuse.com

Beispiel
#maske {
  mask: url(maske.svg#stern);
}


Browsersupport[Bearbeiten]

Achtung!

Die Eigenschaft mask ist derzeit (Stand August 2019) nur in die Browser Firefox und Edge implementiert, deshalb muss man proprietäre Eigenschaften verwenden.

für Chrome, Opera und Safari

  • -webkit-mask-...

Hinweis

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.


Quellen[Bearbeiten]

  1. W3C: Masking

Weblinks[Bearbeiten]