Plan kursu

Podręcznik referencyjny CSS

Atrybuty CSS

Wybór kursów

Polecane kursy:

Skarbca CodeW3C.com

CSS mask atrybut

Poprzednia strona marker-start
Następna strona mask-clip

Definicja i użycie

mask Atrybut używany do ukrywania elementów poprzez maskowanie lub przycinanie obrazu (częściowego lub całkowitego).

mask Atrybut jest skróconą formą następujących atrybutów:

Przykład

Przykład 1

Tworzenie warstwy osłoniętej obrazu:

.mask1 {
  mask: url(w3logo.png) no-repeat 50% 50%;
}

Spróbuj sam

Przykład 2

Używając liniowego i radialnego gradientu tworzy się różne warstwy osłonięte obrazu:

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

Spróbuj sam

Przykład 3

Używając elementu SVG <mask> tworzy się warstwę osłoniętą 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żywając elementu SVG <mask> tworzy się warstwę osłoniętą 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: mask-image mask-mode mask-repeat mask-position mask-clip mask-origin mask-size mask-composite|initial|inherit;

Wartość atrybutu

Wartość	Opis
mask-image	Określa obraz używany jako warstwa maskowania elementu. Domyślna wartość to none.
mask-mode	Określa, czy obraz warstwy maskowania powinien być traktowany jako maska jasności, czy maska alpha. Domyślna wartość to match-source.
mask-repeat	Ustawia, czy oraz w jaki sposób obraz maski ma być powtarzany. Domyślna wartość to repeat.
mask-position	Ustawia początkowe położenie obrazu maski (w stosunku do obszaru pozycji maski). Domyślna wartość to 0% 0%.
mask-clip	Określa obszar, na który wpływa obraz maski. Domyślna wartość to border-box.
mask-origin	Określa początkowe położenie obrazu warstwy maskowania (obszar pozycji maski). Domyślna wartość to border-box.
mask-size	Określa rozmiar obrazu warstwy maskowania. Domyślna wartość to auto.
mask-composite	Określa operację kompozycji używaną do określenia aktualnej warstwy maskowania w stosunku do warstwy maskowania poniżej. Domyślna wartość to add.
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 match-source repeat 0% 0% border-box border-box auto add
Inheredność:	Nie
Tworzenie animacji:	Nieobsługiwane. Zobacz:Atrybuty związane z animacją.
Wersja:	Moduł Maskowania CSS Poziom 1
Gramatyka JavaScript:	object.style.mask="url(star.svg)"