mask-clip CSS property
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Dezember 2023 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die CSS-Eigenschaft mask-clip bestimmt den Bereich, auf den sich eine Maske auswirkt. Der gezeichnete Inhalt eines Elements wird auf diesen Bereich begrenzt.
Syntax
/* <coord-box> values */
mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;
/* Keyword value */
mask-clip: no-clip;
/* Multiple values */
mask-clip: padding-box, no-clip;
mask-clip: view-box, fill-box, border-box;
/* Global values */
mask-clip: inherit;
mask-clip: initial;
mask-clip: revert;
mask-clip: revert-layer;
mask-clip: unset;
Werte
Die Eigenschaft akzeptiert eine durch Kommas getrennte Liste von Schlüsselwortwerten. Jeder Wert ist entweder ein <coord-box> oder no-clip:
content-box-
Der gezeichnete Inhalt wird auf die Inhaltsbox begrenzt.
padding-box-
Der gezeichnete Inhalt wird auf die Padding-Box begrenzt.
border-box-
Der gezeichnete Inhalt wird auf die Border-Box begrenzt.
fill-box-
Der gezeichnete Inhalt wird auf die Begrenzungsbox des Objekts begrenzt.
stroke-box-
Der gezeichnete Inhalt wird auf die Begrenzungsbox der Kontur begrenzt.
view-box-
Verwendet den nächstgelegenen SVG-Viewport als Referenzbox. Wenn für das Element, das den SVG-Viewport erstellt, ein
viewBox-Attribut angegeben ist, liegt der Ursprung der Referenzbox am Ursprung des durch dasviewBox-Attribut festgelegten Koordinatensystems. Die Abmessungen der Referenzbox entsprechen den Werten für Breite und Höhe desviewBox-Attributs. no-clip-
Der gezeichnete Inhalt wird nicht begrenzt.
border-
Dieses Schlüsselwort verhält sich wie
border-box. padding-
Dieses Schlüsselwort verhält sich wie
padding-box. content-
Dieses Schlüsselwort verhält sich wie
content-box. text-
Dieses Schlüsselwort begrenzt das Maskenbild auf den Text des Elements.
Beschreibung
Die Eigenschaft mask-clip definiert den Bereich des Elements, auf den sich die angewendete Maske auswirkt.
Bei Maskenebenenbildern, die nicht auf ein SVG-Element <mask> verweisen, definiert die Eigenschaft mask-clip den Zeichenbereich der Maske, also den Bereich, auf den sich die Maske auswirkt. Der gezeichnete Inhalt des Elements wird auf diesen Bereich begrenzt.
Die Eigenschaft mask-clip hat keine Auswirkung auf ein Maskenebenenbild, das auf ein <mask>-Element verweist. Wenn die Quelle von mask-image ein <mask>-Element ist, bestimmen dessen Attribute x, y, width, height und maskUnits den Zeichenbereich der Maske.
Auf ein Element können mehrere Maskenebenen angewendet werden. Die Anzahl der Ebenen richtet sich nach der Anzahl der durch Kommas getrennten Werte der Eigenschaft mask-image (auch wenn ein Wert none ist). Jeder mask-clip-Wert in der durch Kommas getrennten Werteliste wird der Reihe nach einem mask-image-Wert zugeordnet. Unterscheidet sich die Anzahl der Werte der beiden Eigenschaften, werden überzählige mask-clip-Werte nicht verwendet. Hat mask-clip weniger Werte als mask-image, werden die mask-clip-Werte wiederholt.
Formale Definition
| Anfangswert | border-box |
|---|---|
| Anwendbar auf | alle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des <defs> Elements und allen Grafikelementen |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
mask-clip =
[ <coord-box> | no-clip ]#
<coord-box> =
<paint-box> |
view-box
<paint-box> =
<visual-box> |
fill-box |
stroke-box
<visual-box> =
content-box |
padding-box |
border-box
Beispiele
Eine Maske auf die Border-Box begrenzen
Dieses Beispiel zeigt drei mask-clip-Werte.
HTML
Wir verwenden drei Elemente, die jeweils einen anderen <coord-box>-Wert als Klassennamen haben.
<div class="border-box"></div>
<div class="padding-box"></div>
<div class="content-box"></div>
CSS
Das CSS legt für die Elemente einen Hintergrund, einen Rahmen, Innen- und Außenabstände sowie ein Maskenbild fest. Jedes <div> erhält einen anderen <coord-box>-Wert. Wir erzeugen Inhalt mit dem jeweiligen Klassennamen und verschieben diesen Text um 10px nach oben, damit er nicht durch die Maske ausgeblendet wird.
div {
width: 100px;
height: 100px;
background-color: #8cffa0;
margin: 10px;
border: 20px solid #8ca0ff;
padding: 20px;
mask-image: url("https://mdn.github.io/shared-assets/images/examples/mdn.svg");
mask-size: 100% 100%;
}
.content-box {
mask-clip: content-box;
}
.border-box {
mask-clip: border-box;
}
.padding-box {
mask-clip: padding-box;
}
div::before {
content: attr(class);
position: relative;
top: -10px;
}
Ergebnisse
Spezifikationen
| Spezifikation |
|---|
| CSS Masking Module Level 1 # the-mask-clip |