Übersicht

The mask property in CSS allows users to alter the visibility of an item by either partially or fully hiding the item. This is accomplished by either masking or clipping the image at specific points.

Initialwertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des defs Elements und allen Grafikelementen
VererbtNein
Prozentwertewie die jeweiligen Kurzschreibweisen:
Medienvisuell
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
  • mask-image: wie angegeben, aber mit absoluten url Werten
  • mask-mode: wie angegeben
  • mask-repeat: Besteht aus zwei Schlüsselwörtern, einem pro Richtung
  • mask-position: Besteht aus zwei Schlüsselwörtern, die den Ursprung und die beiden Versätze vom Ursprung repräsentieren, wobei beide als absolute Länge angegeben werden (falls eine <length> angegeben wurde), ansonsten einen Prozentwert.
  • mask-clip: wie angegeben
  • mask-origin: wie angegeben
  • mask-size: relativ zur gleichen Achse der Innenabstandsbox des Scrollcontainers
  • mask-composite: wie angegeben
Animationstypwie die jeweiligen Kurzschreibweisen:
Kanonische Reihenfolgenach Grammatik
Erstellt StapelkontextJa

Syntax

/* Schlüsselwortwerte */
mask: none;

/* Bildwerte */
mask: url(mask.png);                       /* Pixelbild, das als Maske verwendet wird */
mask: url(masks.svg#star);                 /* Element mit SVG-Grafik, die als Maske verwendet wird */

/* Kombinierte Werte */
mask: url(masks.svg#star) luminance;       /* Element mit SVG-Grafik, die als Helligkeitsmaske verwendet wird */
mask: url(masks.svg#star) 40px 20px;       /* Element mit SVG-Grafik, die als Maske verwendet wird, die 40px vom oberen Rand und 20px vom linken Rand positioniert ist */
mask: url(masks.svg#star) 0 0/50px 50px;   /* Element mit SVG-Grafik, die als Maske mit einer Breite und Höhe von 50px verwendet wird */
mask: url(masks.svg#star) repeat-x;        /* Element mit SVG-Grafik, die als horizontal wiederholte Maske verwendet wird */
mask: url(masks.svg#star) stroke-box;      /* Element mit SVG-Grafik, die als Maske verwendet wird, die sich bis zur Box erstreckt, die von der Kontur eingeschlossen wird */
mask: url(masks.svg#star) exclude;         /* Element mit SVG-Grafik, die als Maske verwendet wird und deren nicht überlappende Teile mit dem Hintergrund kombiniert werden */

/* Globale Werte */
mask: inherit;
mask: initial;
mask: unset;

Werte

Falls der Wert ein URL Wert ist, wird das Element als SVG-Maske verwendet, dass durch die URI referenziert wird.

<mask-layer>#

wobei
<mask-layer> = <mask-reference> || <position> [ / <bg-size> ]? || <repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode>

wobei
<mask-reference> = none | <image> | <mask-source>
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain
<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box
<compositing-operator> = add | subtract | intersect | exclude
<masking-mode> = alpha | luminance | match-source

wobei
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
<mask-source> = <url>
<length-percentage> = <length> | <percentage>
<shape-box> = <box> | margin-box

wobei
<image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>
<box> = border-box | padding-box | content-box

wobei
<image-tags> = ltr | rtl
<image-src> = <url> | <string>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )

wobei
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop>
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>

wobei
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<linear-color-stop> = <color> && <color-stop-length>
<linear-color-hint> = <length-percentage>
<angular-color-stop> = <color> && <color-stop-angle>?
<angular-color-hint> = <angle-percentage>

wobei
<color-stop-length> = <length-percentage>{1,2}
<color-stop-angle> = <angle-percentage>{1,2}
<angle-percentage> = <angle> | <percentage>

Beispiele

.target {
  mask: url(#c1);
}

.anothertarget {
  mask: url(resources.svg#c1);
}

Spezifikationen

Spezifikation Status Kommentar
CSS Masking Module Level 1
Die Definition von 'mask' in dieser Spezifikation.
Anwärter Empfehlung Erweitert die Benutzung auf HTML Elemente.
Erweitert die Syntax, indem sie als eine Kurzschreibweise für die neuen mask-* Eigenschaften in dieser Spezifikation definiert wird.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Die Definition von 'mask' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
maskChrome Teilweise Unterstützung 1
Hinweise
Teilweise Unterstützung 1
Hinweise
Hinweise While the property is recognized, values applied to it don't have any effect.
Vollständige Unterstützung Ja
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Hinweise The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 2
Hinweise
Vollständige Unterstützung 2
Hinweise
Hinweise From Firefox 10, the default color space when handling masks is sRGB. Previously, the default and only supported color space was linear RGB. This changes the appearance of mask effects, but brings Firefox into compliance with the second edition of the SVG 1.1 specification.
IE Keine Unterstützung NeinOpera Teilweise Unterstützung Teilweise
Hinweise
Teilweise Unterstützung Teilweise
Hinweise
Hinweise While the property is recognized, values applied to it don't have any effect.
Vollständige Unterstützung Ja
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Hinweise The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
Safari Teilweise Unterstützung 4
Hinweise
Teilweise Unterstützung 4
Hinweise
Hinweise While the property is recognized, values applied to it don't have any effect.
Vollständige Unterstützung Ja
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Hinweise The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
WebView Android Vollständige Unterstützung 2
Vollständige Unterstützung 2
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android Teilweise Unterstützung 18
Hinweise
Teilweise Unterstützung 18
Hinweise
Hinweise While the property is recognized, values applied to it don't have any effect.
Vollständige Unterstützung Ja
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Hinweise The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise From Firefox 10, the default color space when handling masks is sRGB. Previously, the default and only supported color space was linear RGB. This changes the appearance of mask effects, but brings Firefox into compliance with the second edition of the SVG 1.1 specification.
Opera Android Teilweise Unterstützung Teilweise
Hinweise
Teilweise Unterstützung Teilweise
Hinweise
Hinweise While the property is recognized, values applied to it don't have any effect.
Vollständige Unterstützung Ja
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Hinweise The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
Safari iOS Vollständige Unterstützung 3.2
Mit Präfix
Vollständige Unterstützung 3.2
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android ?
Applies to HTML elementsChrome Vollständige Unterstützung Ja
Mit Präfix
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge ? Firefox Vollständige Unterstützung 3.5IE Keine Unterstützung NeinOpera Vollständige Unterstützung Ja
Mit Präfix
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung Ja
Mit Präfix
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android Vollständige Unterstützung Ja
Mit Präfix
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Shorthand for mask-* propertiesChrome Vollständige Unterstützung Ja
Mit Präfix
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge ? Firefox Vollständige Unterstützung 53IE Keine Unterstützung NeinOpera Vollständige Unterstützung Ja
Mit Präfix
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung Ja
Mit Präfix
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android Vollständige Unterstützung Ja
Mit Präfix
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Mobile ? Firefox Android Vollständige Unterstützung 53Opera Android ? Safari iOS ? Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Teilweise Unterstützung  
Teilweise Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: mdnwebdocs-bot, SJW, Sebastianz
Zuletzt aktualisiert von: mdnwebdocs-bot,