Deklarieren von mehreren Masken

Verständnis von Maskenschichten

Sie können CSS-Maskierung auf alle HTML-Elemente und die meisten SVG-Elemente anwenden. Eine Maske kann aus einer oder mehreren zusammengefügten Maskenschichten bestehen. Sie definieren mehrere Schichten mit kommagetrennten Werten in der mask Kurzschreibweise oder der mask-image Eigenschaft – selbst ein auf none gesetzter Wert zählt als Schicht.

Jede Maskenschicht kann ein Maskenbild enthalten, das relativ zur Ursprungsbox der Maske positioniert wird. Das Bild kann skaliert, wiederholt und ausgeschnitten werden. Wenn Sie mehr als ein Maskenbild einfügen, können Sie definieren, wie die Maskenschichten zusammengefügt oder kombiniert werden. (Diese Funktionen werden in diesem Leitfaden kurz eingeführt. Für weitere Details und Beispiele siehe den Leitfaden zu Maskierungseigenschaften.)

Syntax für mehrere Maskenschichten

Die mask-Kurzschreibweise akzeptiert eine kommagetrennte Liste von Maskenschichten. Die Syntax für jede Schicht kann die folgenden Werte enthalten:

<image> <position> / <size> <repeat> <origin> <clip> <composite> <mode>

Alle Komponenten in einer Maskenschicht sind optional. Wenn Sie jedoch den mask-image-Wert weglassen, wird ein transparentes schwarzes Bild als Standard verwendet, das das Element in dieser Schicht vollständig ausblendet.

Die mask-Kurzschreibweise setzt Werte für alle mask-* Eigenschaften. Jede Komponente, die innerhalb einer Schicht nicht deklariert wird, wird auf ihren Anfangswert zurückgesetzt. Die mask Eigenschaft setzt auch alle mask-border-* Eigenschaften auf ihre Anfangswerte zurück. Eine mask Erklärung, die nur einen mask-image-Wert enthält, setzt implizit Folgendes:

mask-mode: match-source; mask-position: 0% 0%; mask-size: auto; mask-repeat: repeat; mask-origin: border-box; mask-clip: border-box; mask-composite: add; mask-border-source: none; mask-border-mode: alpha; mask-border-outset: 0; mask-border-repeat: stretch; mask-border-slice: 0; mask-border-width: auto; 

Definition von Maskenschichten mit mask-image

Solange eine kommagetrennte mask-image Eigenschaftserklärung mindestens einen anderen Wert als none enthält, wird eine Maskenschicht für jeden Wert in der Erklärung erstellt, selbst für die none-Werte. Dieses Verhalten gilt unabhängig davon, ob Sie die mask-image Eigenschaft oder die mask Kurzschreibweise verwenden. Diese Maskenbilder können Verläufe, Bilder oder SVG-Quellen sein. Sie können sie mit einem CSS-Verlauf, einem Rasterbild (wie PNGs) oder einem SVG <mask> Element definieren.

.gradient-mask { mask-image: linear-gradient(to right, black, transparent); } .raster-mask { mask-image: url("alphaImage.png"); } .mask-element-mask { mask-image: url("#svg-mask"); } 

Der einführende Leitfaden zur Maskierung stellt die verschiedenen Arten von Maskenbildern und deren Modi vor.

Die mask-image Eigenschaft ist analog zur background-image Eigenschaft. Ebenso wie bei der background-image Eigenschaft, um mehrere Maskenbilder einzufügen, werden die Bildwerte durch Kommas getrennt.

.multiple-gradient-mask { mask-image: linear-gradient(to right, black, transparent), radial-gradient(circle, white 50%, transparent 75%); } 

Jedes Maskenbild in einer Mehrfachbild-Erklärung erstellt eine Maskenschicht. Alle Beispiele in diesem Abschnitt erstellen eine Maskenschicht, mit Ausnahme der multiple-gradient-mask Erklärung, die zwei erstellt.

Maskenschichten und das Schlüsselwort none

Wenn none der einzige Wert der mask-image Eigenschaft ist, werden keine Maskenschichten erstellt und es findet keine Maskierung statt.

.no-masks { mask-image: none; } 

Ebenso, wenn Sie die mask Kurzschreibweise verwenden, wird keine Maskierung vorgenommen, wenn kein mask-image Wert außer none vorhanden ist. Wenn einer der folgenden deklariert wird, werden keine Maskenschichten erstellt und nichts wird verborgen:

mask: none; mask: none 100px 100px no-repeat; mask: 100px 100px no-repeat; 

Andernfalls, solange ein mask-image deklariert ist, das nicht auf none gesetzt ist, wird für jeden Wert in der kommagetrennten Werteliste eine Maskenschicht erstellt, selbst wenn der mask-image Wert aus einem Wert in der kommagetrennten Liste ausgelassen oder explizit auf none gesetzt wird. Mit anderen Worten, eine Schicht wird für jeden gültigen kommagetrennten Wert erstellt, es sei denn, die gesamte Eigenschaft wird auf none aufgelöst.

.masked-element { mask-image: url("alphaImage.png"), linear-gradient(to right, black, transparent), radial-gradient(circle, white 50%, transparent 75%), none, url("#svg-mask"); } 

Das Schlüsselwort none innerhalb einer Liste von Maskenquellen erstellt eine Maskenschicht, wenn auch eine transparente schwarze Bildschicht. Alle Elemente mit der Klasse masked-element werden fünf Maskenschichten haben:

Wir können die Schichten auch mit der mask Kurzschreibweise erstellen:

.masked-element { mask: url("alphaImage.png"), linear-gradient(to right, black, transparent), radial-gradient(circle, white 50%, transparent 75%), none, url("#svg-mask"); } 

Wenn ein Wert in der kommagetrennten Liste von Werten ein leeres Bild ist, nicht heruntergeladen werden kann, auf ein <mask> Element verweist, das nicht existiert, oder anderweitig nicht angezeigt werden kann (oder auf none gesetzt ist), zählt er dennoch als Maskenbildschicht, was ein transparentes schwarzes Maskenbild rendert, das keinen visuellen Effekt hat. Wenn alle Werte dies tun, wird das Element vollständig verborgen.

Es findet keine Maskierung statt, wenn die gesamte Eigenschaft auf none aufgelöst wird, wodurch das Element vollständig sichtbar wird. Auf der anderen Seite, wenn der Wert mehrere Schichten enthält und mindestens eine nicht none ist, offenbaren die none Schichten keinen Teil des Elements (oder machen keinen Teil des Elements sichtbar). In diesem Beispiel wird der Wert nicht auf none aufgelöst; aber weil alle nicht-none Bilder ungültig sind, findet eine Maskierung statt und das Element wird vollständig ausgeblendet.

Ein berechneter Wert, der nicht none ist, erstellt einen CSS-Stapelkontext.

Wie Maskenschichten die mask-* Eigenschaften beeinflussen

Die Anzahl der Maskenschichten ist wichtig, wenn Sie auch einzelne mask-* Eigenschaften nach oder mit mehr Spezifität als eine mask Erklärung verwenden.

Die mask-* Eigenschaften umfassen:

• mask-mode: Setzt den Modus jeder Maskenschicht auf entweder alpha oder luminance oder ermöglicht es, sie auf den Modus der Quelle durch Setzen des Wertes auf match-source zu standardisieren. Der Standardwert ist match-source.

• mask-position: Analog zur background-position Eigenschaft mit einer Syntax, die der background-position's <position>-Syntax folgt, setzt sie die Anfangsposition des Maskenbildes relativ zur Ursprungsbox der Maskenschicht, definiert durch die mask-origin Eigenschaft. Sie können ein, zwei oder vier <position> Werte spezifizieren. Der Standardwert 0% 0% positioniert die obere linke Ecke der Maske an der oberen linken Ecke der Ursprungsbox der Maske.

• mask-origin: Analog zur background-origin Eigenschaft, gibt sie den Maskenpositionsbereich an, der der Bereich der Ursprungsbox der Maske ist, innerhalb dessen ein Maskenbild positioniert wird. Beispielsweise, wenn die mask-position oben links ist, definiert diese Eigenschaft, ob dies relativ zur Außenkante des Rahmens, der Außenkante des Innenabstands oder der Außenkante des Inhalts ist.

• mask-clip: Analog zur background-clip Eigenschaft, bestimmt sie den Bereich des Elements, der von einer Maske betroffen ist. Sie definiert, ob der zu bemalende Bereich die Rahmen-, Innenrand- oder Inhaltsbox ist, indem der gemalte Inhalt des Elements auf diesen Bereich beschränkt wird. Wenn die mask-image Quelle der Maskenschicht ein SVG-<mask> Element ist, hat die mask-clip Eigenschaft keine Wirkung.

• mask-size: Analog zur background-size Eigenschaft, wird diese verwendet, um die Maskenschicht zu skalieren. Werte können ein einzelnes Schlüsselwort (cover, contain oder auto), eine einzelne Länge oder ein Prozentwert oder zwei durch Leerzeichen getrennte Werte sein – jeder davon kann eine Länge, ein Prozentwert oder auto sein. Der Standardwert ist auto.

• mask-repeat: Analog zur background-repeat Eigenschaft, definiert sie, wie das Bild der Maskenschicht gekachelt wird, nachdem es skaliert und positioniert wurde.

• mask-composite: Definiert, wie eine Maske mit den darunter liegenden Maskenschichten kombiniert wird. Jede Maskenschicht wird zu den zuvor zusammengefügten Maskenschichten darunter entweder hinzugefügt, abgezogen, eingeschlossen oder ausgeschlossen. Ähnlich wie bei mask-mode, gibt es keine analoge background-* Eigenschaft.

Jeder mask-* Wert in einer kommagetrennten Liste von mask Komponenteneigenschaften wird auf eine separate Maskenschicht angewendet. Wie bereits erwähnt, kann ein Element mehrere Maskenschichten haben – die Anzahl der Schichten wird durch die Anzahl der kommagetrennten Werte in den mask-image oder mask Eigenschaften bestimmt. Jeder mask-* Wert wird in der Reihenfolge mit einer Maskenschicht abgeglichen. Wenn die Anzahl der Werte in der mask-* Eigenschaft größer ist als die Anzahl der Maskenschichten, werden alle überschüssigen Werte ignoriert. Wenn die Maskenkomponenteneigenschaft weniger Werte als die Anzahl der Maskenschichten hat, werden die mask-* Werte wiederholt.

Um mehr über diese einzelnen Eigenschaften zu erfahren, siehe CSS Maskeneigenschaften.

Reihenfolge der Kurzschreibkomponenteneigenschaften

In den meisten Fällen ist die Reihenfolge der Eigenschaften flexibel, aber es gibt ein paar Besonderheiten und Ausnahmen.

Reihenfolgeregeln für mask-origin und mask-clip

Der mask-origin Wert, in der Syntax als <origin> aufgeführt, kommt vor den mask-clip Werten, in der Syntax als <clip> aufgeführt.

<image> <position> / <size> <repeat> <origin> <clip> <composite> <mode>

Beide akzeptieren <geometry-box> Schlüsselwörter. Zusätzlich akzeptiert mask-clip auch no-clip. Aus diesem Grund ist die Reihenfolge dieser beiden wichtig, wenn Sie mask-clip auf einen anderen Wert als no-clip setzen möchten.

• Wenn ein <geometry-box> Wert zusammen mit dem no-clip Schlüsselwort vorhanden ist, dann setzt das <geometry-box> den mask-origin Wert, und mask-clip wird auf no-clip gesetzt. In diesem Fall ist die Reihenfolge unwichtig.

• Wenn nur ein <geometry-box> Wert vorhanden ist und kein no-clip Schlüsselwort, werden sowohl die mask-origin als auch die mask-clip Komponenten auf diesen Wert gesetzt. Da es nur einen Wert gibt, ist die Reihenfolge wieder bedeutungslos.

• Wenn zwei <geometry-box> Werte vorhanden sind, setzt der erste die mask-origin Komponente und der zweite die mask-clip Komponente. In diesem Fall ist die Reihenfolge sehr wichtig.

Das Festlegen der falschen Reihenfolge für die mask-origin und mask-clip Werte kann das Erscheinungsbild beeinflussen, führt jedoch nicht dazu, dass die Erklärung fehlschlägt.

Reihenfolgeregeln für mask-size und mask-position

Sie haben möglicherweise einen Schrägstrich zwischen mask-position und mask-size bemerkt, in der Syntax als <position> und <size> aufgeführt. Beide Eigenschaften akzeptieren ähnliche Werte.

<image> <position> / <size> <repeat> <origin> <clip> <composite> <mode>

In diesem Fall ist die Reihenfolge sehr wichtig. Wenn nur ein Wert oder ein Paar von <length-percentage> Werten vorhanden ist, wird es die Position des Bildes angeben und nicht die Größe. Das Einschließen sowohl einer Position als auch einer Größe in einer Maskenschicht ohne den Schrägstrich zwischen den beiden führt zur Ungültigkeit der gesamten Erklärung.

mask: url("star.svg") bottom 2em right 4em / auto 2vw no-repeat padding-box content-box luminance, url("circle.svg") 100px 100px / 50% repeat-x border-box padding-box alpha; 

Wenn ein einzelnes Paar von <length-percentage> Werten vorhanden ist, setzt es die mask-position Eigenschaft und die mask-size wird auf auto gesetzt. Wenn eine Schicht sowohl eine mask-size als auch eine mask-position enthält, muss der mask-size Eigenschaftswert nach dem mask-position Eigenschaftswert kommen und die Werte müssen durch einen Schrägstrich (/) getrennt sein. Der Schrägstrich ist erforderlich, selbst wenn die mask-size auf einen Wert gesetzt ist, der kein gültiger mask-position Wert ist.

mask: url("star.svg") contain; mask: url("star.svg") 10px 10px cover; mask: url("star.svg") top right 100px 100px; 

mask: url("star.svg") 10px 10px / cover; mask: url("star.svg") top 100px right 100px; mask: url("star.svg") top right / 100px 100px; 

Um eine mask-size in einer Maskenschicht unter Verwendung der mask Kurzschreibweise einzuschließen, müssen Sie einen mask-position Wert mit einem Schrägstrich unmittelbar davor einschließen.

Siehe auch

• Einführung in die CSS-Maskierung
• CSS Maskeneigenschaften
• Einführung in CSS-Clipping
• CSS-Maskierung Modul