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.

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-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

Anfangswertluminance
Anwendbar auf<mask> 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

Siehe auch