mask-origin

Die mask-origin-Eigenschaft ist eine durch Kommas getrennte Liste von <coord-box> Schlüsselwortwerten, einschließlich:

content-box

Die Position ist relativ zur Inhaltsbox.

padding-box

Die Position ist relativ zur Padding-Box.

border-box

Die Position ist relativ zur Border-Box.

fill-box

Die Position ist relativ zur Begrenzungsbox des Objekts.

stroke-box

Die Position ist relativ zur Strichbegrenzungsbox.

view-box

Verwendet den nächstgelegenen SVG-Viewport als Referenzbox. Wenn ein viewBox Attribut für das Element, das den SVG-Viewport erstellt, angegeben ist, wird die Referenzbox an der Ursprungsposition des Koordinatensystems positioniert, das durch das viewBox-Attribut festgelegt ist, und die Dimension der Referenzbox wird auf die Breiten- und Höhenwerte des viewBox-Attributs gesetzt.

Es gibt drei nicht standardisierte Werte, die Kurzformen für standardmäßige <coord-box> Werte sind: content ist ein Alias für content-box, padding ist ein Alias für padding-box, und border ist ein Alias für border-box.

Die mask-origin-Eigenschaft ist der background-origin-Eigenschaft sehr ähnlich, hat jedoch eine andere Menge an Werten und einen anderen Anfangswert. Der Anfangswert hängt davon ab, ob es eine zugehörige CSS-Layout-Box gibt; falls ja, ist der Standardwert border-box. Der Standard für background-origin ist zum Vergleich padding-box.

Für SVG-Elemente ohne zugehörige CSS-Layout-Box werden die Werte content-box, padding-box und border-box (der Standardwert) als fill-box berechnet, was bedeutet, dass die Position relativ zur Objektbegrenzungsbox ist. Für HTML-Elemente, wenn ein SVG-bezogener Wert von fill-box, stroke-box oder view-box gesetzt ist, wird der Wert als border-box berechnet.

Ein Element kann mehrere Maskenschichten haben. Die Anzahl der Schichten wird durch die Anzahl der durch Kommas getrennten Werte in der mask-image-Eigenschaft bestimmt (auch wenn einer oder mehrere dieser Werte none sind). Jeder mask-origin-Wert in der durch Kommas getrennten Liste von Werten wird in derselben Reihenfolge mit einem durch Kommas getrennten mask-image-Wert abgeglichen.

Wenn die Anzahl der Werte in den beiden Eigenschaften unterschiedlich ist, werden bei mehr mask-origin-Werten als mask-image-Werten die überzähligen mask-origin-Werte nicht verwendet. Wenn mask-origin weniger Werte als mask-image hat, werden die mask-origin-Werte wiederholt.

Für Elemente, die als eine einzelne Box gerendert werden, legt diese Eigenschaft den Maskenpositionierungsbereich oder den Ursprungsort des Bildes fest, das durch die mask-image-Eigenschaft referenziert wird.

Für Elemente, die als mehrere Boxen gerendert werden, wie z.B. Inline-Boxen, die sich über mehr als eine Zeile erstrecken, gibt die mask-origin-Eigenschaft an, auf welche Boxen die box-decoration-break-Eigenschaft wirkt, um den Maskenpositionierungsbereich zu bestimmen.

Die mask-origin kann bewirken, dass das Maskenschichtenbild abgeschnitten wird. Zum Beispiel, wenn die mask-clip-Eigenschaft auf padding-box gesetzt ist, mask-origin auf border-box gesetzt ist, mask-position auf den Rand oben links gesetzt ist und das Element eine Umrandung hat, dann wird das Maskenschichtenbild am oberen linken Rand abgeschnitten.

mask-origin = 
  <coord-box>#  

<coord-box> = 
  <paint-box>  |
  view-box     

<paint-box> = 
  <visual-box>  |
  fill-box      |
  stroke-box    

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

Dieses Beispiel demonstriert die grundlegende Nutzung und vergleicht drei Werte der mask-origin-Eigenschaft.

HTML

Wir fügen vier <section>-Elemente hinzu, von denen jedes ein <div>-Element enthält.

<section class="content">
  <div></div>
</section>
<section class="padding">
  <div></div>
</section>
<section class="border">
  <div></div>
</section>
<section class="comparison">
  <div></div>
</section>

CSS

Wir wenden border, padding und margin auf jedes <div> an. Diese bilden die Referenzpunkte für den Ursprung des Maskenbildes. Der border-Shorthand umfasst eine border-color. Wir fügen auch eine background-color hinzu. Diese bieten einen grünen Hintergrund und eine blaue Border zur Maske. Schließlich werden allen <div>-Elementen ein mask-image zugewiesen.

div {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 10px solid blue;
  background-color: #8cffa0;
  padding: 10px;
  mask-image: url(https://mdn.github.io/shared-assets/images/examples/mask-star.svg);
}
section {
  border: 1px solid black;
}

Wir geben jedem <div> einen anderen mask-origin-Wert.

.content div {
  mask-origin: content-box;
}

.padding div {
  mask-origin: padding-box;
}

.border div {
  mask-origin: border-box;
}

.comparison div {
  mask-image: none;
}

Wir erzeugen auch etwas Text in jedem <section>, um den Maskenursprung für jeden <div>-Container anzugeben.

section::before {
  content: attr(class);
  display: block;
  text-align: center;
}

body {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
}

Ergebnis

Beachten Sie den Unterschied zwischen den drei Werten. In den ersten drei Boxen, jeweils beginnt die Maske von:

• Der äußeren Kante des Borders.
• Der inneren Border-Kante, die die äußere Kante der Padding-Box ist.
• Der inneren Padding-Kante, die die äußere Kante der Inhaltsbox ist.

Die vierte Box hat kein mask-image angegeben: Es ist ein Referenzbild, das hinzugefügt wurde, um Ihnen die Möglichkeit zu geben, das Ausmaß der Inhalts- und Padding-Bereiche leicht zu visualisieren.

Dieses Beispiel zeigt die Verwendung unterschiedlicher mask-origin-Werte für verschiedene mask-images, die auf ein einzelnes Element angewendet werden.

HTML

Wir fügen ein einzelnes <div> hinzu.

<div></div>

CSS

Wir wenden anstelle von einem drei Maskenbilder an, jedes mit einer anderen mask-position. Wir setzen auch die Wiederholung der Maskenbilder auf "nicht wiederholen".

div {
  width: 120px;
  height: 120px;
  margin: 10px;
  border: 10px solid blue;
  background-color: #8cffa0;
  padding: 10px;
  mask-image:
    url(https://mdn.github.io/shared-assets/images/examples/mask-star.svg),
    url(https://mdn.github.io/shared-assets/images/examples/mask-star.svg),
    url(https://mdn.github.io/shared-assets/images/examples/mask-star.svg);
  mask-position:
    top left,
    top right,
    bottom center;
  mask-repeat: no-repeat;
  mask-origin: content-box, border-box;
}

Ergebnisse

Wir haben drei mask-image-Werte, aber nur zwei mask-origin-Werte. Dies bedeutet, dass die mask-origin-Werte wiederholt werden, als ob wir mask-origin: content-box, padding-box, content-box; gesetzt hätten. Der border-box Stern, die einzige Maske, die den Rand überlappt, ist der obere rechte Stern.

• background-origin
• mask-image
• mask-position
• mask-repeat
• mask-size
• mask shorthand
• Einführung in CSS-Masking
• CSS mask-Eigenschaften
• Deklaration mehrerer Masken
• CSS-Masking Modul