CSS właściwość mask-image

Poprzednia strona mask-composite
Następna strona mask-mode

Definicja i użycie

mask-image Atrybuty są używane do określenia obrazu używanego jako warstwy maskującej elementu.

Wskazówka:Liniowe i radialne gradienty w CSS mogą być używane jako obrazy maskujące.

Przykład

Przykład 1

Twórz warstwę maskowania dla obrazu:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 70%;
  mask-repeat: no-repeat;
}

Spróbuj sam

Przykład 2

Używaj liniowych i radialnych gradientów do tworzenia różnych warstw maskowania obrazu:

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}
.mask2 {
  -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
  -webkit-mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5));
}

Spróbuj sam

Przykład 3

Użyj elementu SVG <mask> do stworzenia warstwy maskowania dla obrazu:

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

Spróbuj sam

Przykład 4

Użyj elementu SVG <mask> do stworzenia dodatkowej warstwy maskowania dla obrazu:

<svg width="600" height="400">
  <mask id="svgmask1">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>

Spróbuj sam

Gramatyka CSS

mask-image: none|image|url()|initial|inherit;

Wartość atrybutu

Wartość	Opis
none	Domyślna wartość. Nie używaj obrazu maskującego.
image	Używany jako obraz maskujący.
url()	Wskazówka URL dla elementu obrazu lub SVG <mask>.
initial	Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit	Dziedziczy tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość:	none
Inherdencja:	Nie
Tworzenie animacji:	Nieobsługiwane. Zobacz:Atrybuty związane z animacją.
Wersja:	Moduł Maskowania CSS Poziom 1
Gramatyka JavaScript:	object.style.maskImage="url(star.svg)"