mask-type

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die mask-type CSS-Eigenschaft legt fest, ob ein SVG-<mask>-Element als Luminanz oder Alpha-Maske verwendet wird. Sie gilt für das <mask>-Element selbst.

Diese Eigenschaft kann durch die mask-mode-Eigenschaft außer Kraft gesetzt werden, die denselben Effekt hat, jedoch auf das Element angewendet wird, bei dem die Maske verwendet wird. Alpha-Masken werden im Allgemeinen schneller gerendert.

Syntax

css
/* Keyword values */
mask-type: luminance;
mask-type: alpha;

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

Die mask-type-Eigenschaft wird als einer der unten aufgeführten Schlüsselwortwerte angegeben.

Werte

luminance

Ist ein Schlüsselwort, das angibt, dass das zugehörige Maskenbild eine Luminanzmaske ist, d. h., dass seine relative Luminanz-Werte beim Anwenden verwendet werden müssen.

alpha

Ist ein Schlüsselwort, das angibt, dass das zugehörige Maskenbild eine Alphamaske ist, d. h., dass seine Alphakanal-Werte beim Anwenden verwendet werden müssen.

Formale Definition

Initialer Wertluminance
Anwendbar aufmask Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

mask-type = 
  luminance  |
  alpha

Beispiele

Einstellen einer Alphamaske

HTML

html
<section>
  <div class="red-square"></div>
</section>

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="0"
  height="0">
  <defs>
    <mask id="m" maskContentUnits="objectBoundingBox">
      <rect
        x=".2"
        y=".1"
        width=".4"
        height=".8"
        fill="yellow"
        fill-opacity="0.7" />
    </mask>
  </defs>
</svg>

CSS

css
* {
  margin: 0px;
  padding: 0px;
}

section {
  width: fit-content;
  border: 1px solid blue;
}

.red-square {
  height: 100px;
  width: 100px;
  background-color: red;
  border: solid 1px black;
  mask: url("#m");
}

mask {
  mask-type: alpha;
}

Ergebnis

Einstellen einer Luminanzmaske

HTML

html
<section>
  <div class="red-square"></div>
</section>

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="0"
  height="0">
  <defs>
    <mask id="m" maskContentUnits="objectBoundingBox">
      <rect
        x=".2"
        y=".1"
        width=".4"
        height=".8"
        fill="yellow"
        fill-opacity="0.7" />
    </mask>
  </defs>
</svg>

CSS

css
* {
  margin: 0px;
  padding: 0px;
}

section {
  width: fit-content;
  border: 1px solid blue;
}

.red-square {
  height: 100px;
  width: 100px;
  background-color: red;
  border: solid 1px black;
  mask: url("#m");
}

mask {
  mask-type: luminance;
}

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch