CSS/Eigenschaften/mask-origin

Browserunterstützung
caniuse.com

Die Eigenschaft mask-origin legt die Position einer Grafik in die obere linke Ecke.

Erlaubte Werte

ein oder zwei Werte für

• content-box: (Inhaltsbox) Bereich, der durch den Inhalt oder die Eigenschaften width und height festgelegt wurde.
• padding-box: (Polsterungsbox) Bereich, der content-box und padding (Innenabstand) umfasst. Besitzt eine Seite keinen Innenabstand, so ist die Polsterungskante mit der Innenkante identisch.
• border-box: (Rahmenbox) Box, die content-box, einen möglichen Innenabstand und die durch border festgelegten Rahmen umfasst. Besitzt eine Box keinen Rahmen, so ist die Rahmenbox mit der Polsterungsbox identisch.
• margin-box: Box mitsamt durch margin festgelegten Außenabständen. Sind für eine Box keine Außenabstände definiert, so ist die Außenkante mit der Rahmenkante identisch.
• fill-box:
• stroke-box:
• view-box: benutzt den nächsten [viewbox

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

border-box

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel

img {
  width: 150px;
   mask-image: linear-gradient(transparent, white);
   mask-origin: content-box;
}

 

Beachten Sie: Für ältere Browserversionen wird noch der vendor-prefix -webkit- benötigt.

Siehe auch

• Masken und Beschneidungen/Masken
  • mask-origin

Weblinks

• Spezifikation (W3C): mask-origin property
• MDN: mask-origin property
• Details: caniuse.com