mask-position

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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

Die mask-position CSS Eigenschaft legt die anfängliche Position fest, relativ zur Maskenpositionsschicht, die durch mask-origin definiert wird, für jedes definierte Maskenbild.

Syntax

css
/* Keyword values */
mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;

/* <position> values */
mask-position: 25% 75%;
mask-position: 0px 0px;
mask-position: 10% 8em;

/* Multiple values */
mask-position: top right;
mask-position:
  1rem 1rem,
  center;

/* Global values */
mask-position: inherit;
mask-position: initial;
mask-position: revert;
mask-position: revert-layer;
mask-position: unset;

Ein oder mehrere <position>-Werte, getrennt durch Kommas.

Werte

<position>

Ein bis vier Werte, die eine 2D-Position in Bezug auf die Kanten des Box-Elements darstellen. Relative oder absolute Offsets können angegeben werden. Beachten Sie, dass die Position außerhalb der Box des Elements gesetzt werden kann.

Formale Definition

Anfangswert0% 0%
Anwendbar aufalle Elemente; In SVG gilt betrifft dies Containerelemente mit Ausnahme des <defs> Elements und allen Grafikelementen
VererbtNein
Prozentwertebeziehen sich auf die Größe des Maskenzeichenbereichs minus der Größe des Maskenebenenbildes (siehe den Text zu background-position)
Berechneter WertBesteht aus zwei Schlüsselwörtern, die den Ursprung und die beiden Versätze vom Ursprung repräsentieren, wobei beide als absolute Länge angegeben werden (falls eine <length> angegeben wurde), ansonsten einen Prozentwert.
Animationstypa repeatable list

Formale Syntax

mask-position = 
  <position>#  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Maskenposition einstellen

Klicken Sie auf "Play" im Live-Beispiel, um den Code im MDN-Playground zu öffnen und den mask-position-Wert auf einen der oben beschriebenen erlaubten Werte zu ändern.

html
<div id="wrapper">
  <div class="masked"></div>
</div>
css
#wrapper {
  border: 1px solid black;
  width: 250px;
  height: 250px;
}

.masked {
  width: 250px;
  height: 250px;
  margin-bottom: 10px;
  background: blue linear-gradient(red, blue);

  mask-image: url(https://mdn.github.io/shared-assets/images/examples/mask-star.svg);
  mask-repeat: no-repeat;
  mask-position: top right;
}

Spezifikationen

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

Browser-Kompatibilität

Siehe auch