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.

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

BCD tables only load in the browser

Siehe auch