mask-clip

Baseline 2023 *

Newly available

Since ⁨December 2023⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

Die mask-clip CSS-Eigenschaft bestimmt den Bereich, der von einer Maske betroffen ist. Der bemalte Inhalt eines Elements muss auf diesen Bereich beschränkt sein.

Syntax

css

/* <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 values */
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 Kommata getrennte Liste von Schlüsselwörtern. Jeder Wert ist ein <coord-box> oder no-clip:

content-box: Der bemalte Inhalt wird auf die Content-Box begrenzt.
padding-box: Der bemalte Inhalt wird auf die Padding-Box begrenzt.
border-box: Der bemalte Inhalt wird auf die Border-Box begrenzt.
fill-box: Der bemalte Inhalt wird auf die Objektbegrenzungsbox begrenzt.
stroke-box: Der bemalte Inhalt wird auf die Strichbegrenzungsbox begrenzt.
view-box: Verwendet die nächstgelegene SVG-Ansicht als Referenzbox. Wenn ein viewBox-Attribut für das Element, das das SVG-Viewport erstellt, spezifiziert ist, wird die Referenzbox am Ursprung des durch das viewBox-Attribut festgelegten Koordinatensystems positioniert und die Dimension der Referenzbox wird auf die Breiten- und Höhenwerte des viewBox-Attributs gesetzt.
no-clip: Der bemalte Inhalt wird nicht beschnitten.
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 schneidet das Maskenbild auf den Text des Elements zu.

Beschreibung

Die mask-clip-Eigenschaft definiert den Bereich des Elements, der von der angewendeten Maske betroffen ist.

Für Maskenebenenbilder, die nicht auf ein SVG-<mask>-Element verweisen, definiert die mask-clip-Eigenschaft den Maskenbemalungsbereich oder den Bereich, der von der Maske betroffen ist. Der bemalte Inhalt des Elements wird auf diesen Bereich beschränkt.

Die mask-clip-Eigenschaft hat keine Auswirkungen auf ein Maskenebenenbild, das auf ein <mask>-Element verweist. Die Attribute x, y, width, height und maskUnits des <mask>-Elements bestimmen den Maskenbemalungsbereich, wenn die Quelle des mask-image ein <mask> ist.

Ein Element kann mehrere Maskenschichten haben. Die Anzahl der Schichten wird durch die Anzahl der durch Komma getrennten Werte in der mask-image-Eigenschaft bestimmt (auch wenn ein Wert none ist). Jeder mask-clip-Wert in der durch Komma getrennten Liste von Werten wird mit den mask-image-Werten in der Reihenfolge abgeglichen. Wenn die Anzahl der Werte in den beiden Eigenschaften unterschiedlich ist, werden überschüssige mask-clip-Werte nicht verwendet oder, wenn mask-clip weniger Werte hat 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

Abschneiden einer Maske auf die Border-Box

Dieses Beispiel zeigt drei mask-clip-Werte.

HTML

Wir inkludieren drei Elemente, jedes mit einem anderen <coord-box>-Wert als Klassenname.

html

<div class="border-box"></div>
<div class="padding-box"></div>
<div class="content-box"></div>

CSS

Das CSS definiert, dass das Element einen Hintergrund, Rahmen, Padding und Margin hat, zusammen mit einem Maskenbild, wobei jedes <div> ein anderes <coord-box> hat. Wir haben Inhalt mit dem Namen der Klasse generiert und diesen Text 10px nach oben verschoben, um zu verhindern, dass er aus dem Sichtbereich maskiert wird.

css

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;
}

body {
  display: flex;
  flex-flow: row wrap;
}

Ergebnisse

Spezifikationen

Specification
CSS Masking Module Level 1 # the-mask-clip

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden