Maskowanie CSS
Dzięki maskowaniu CSS tworzysz warstwę maski, którą umieszczasz nad elementem, aby częściowo lub całkowicie ukryć części elementu.
Właściwość CSS mask-image
Właściwość CSS mask-imageokreśla obraz warstwy maski.
Obraz warstwy maski może być obrazem PNG, obrazem SVG, gradientem CSS lub elementem SVG <mask> .
Obsługa przeglądarki
Uwaga: większość przeglądarek ma tylko częściową obsługę maskowania CSS. Będziesz musiał użyć prefiksu -webkit- oprócz standardowej właściwości w większości przeglądarek.
Liczby w poniższej tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość. Liczby, po których następuje -webkit- określają pierwszą wersję, która działała z przedrostkiem.
| Property | |||||
|---|---|---|---|---|---|
| mask-image | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
Użyj obrazu jako warstwy maski
Aby użyć obrazu PNG lub SVG jako warstwy maski, użyj wartości url() do przekazania obrazu warstwy maski.
Obraz maski musi mieć przezroczysty lub półprzezroczysty obszar. Czarny oznacza w pełni przezroczysty.
Oto obraz maski (obraz PNG), którego użyjemy:
Oto zdjęcie z Cinque Terre we Włoszech:
Teraz zastosujemy obraz maski (obraz PNG powyżej) jako warstwę maski dla obrazu z Cinque Terre we Włoszech:
Przykład
Oto kod źródłowy:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
Przykład wyjaśniony
Właściwość mask-imageokreśla obraz, który ma być używany jako warstwa maskująca dla elementu.
Właściwość mask-repeatokreśla, czy lub w jaki sposób będzie powtarzany obraz maski. Wartość no-repeat
wskazuje, że obraz maski nie zostanie powtórzony (obraz maski zostanie wyświetlony tylko raz).
Inny przykład
Jeśli pominiemy mask-repeatwłaściwość, obraz maski zostanie powtórzony na całym obrazie z Cinque Terre we Włoszech:
Przykład
Oto kod źródłowy:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
}
Użyj gradientów jako warstwy maski
Gradienty liniowe i radialne CSS mogą być również używane jako obrazy maski.
Przykłady gradientów liniowych
Tutaj używamy gradientu liniowego jako warstwy maski dla naszego obrazu. Ten liniowy gradient biegnie od góry (czarny) do dołu (przezroczysty):
Przykład
Użyj gradientu liniowego jako warstwy maski:
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black,
transparent);
}
Tutaj używamy gradientu liniowego wraz z maskowaniem tekstu jako warstwy maski dla naszego obrazu:
Cinque Terre to obszar przybrzeżny w Ligurii, w północno-zachodnich Włoszech. Leży w zachodniej części prowincji La Spezia i obejmuje pięć wiosek: Monterosso al Mare, Vernazza, Corniglia, Manarola i Riomaggiore.
Cinque Terre to obszar przybrzeżny w Ligurii, w północno-zachodnich Włoszech. Leży w zachodniej części prowincji La Spezia i obejmuje pięć wiosek: Monterosso al Mare, Vernazza, Corniglia, Manarola i Riomaggiore.
Cinque Terre to obszar przybrzeżny w Ligurii, w północno-zachodnich Włoszech. Leży w zachodniej części prowincji La Spezia i obejmuje pięć wiosek: Monterosso al Mare, Vernazza, Corniglia, Manarola i Riomaggiore.
Przykład
Użyj gradientu liniowego wraz z maskowaniem tekstu jako warstwy maski:
.mask1 {
max-width: 600px;
height: 350px;
overflow-y: scroll;
background: url(img_5terre.jpg) no-repeat;
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient (black, transparent);
}
Przykłady gradientów promieniowych
Tutaj używamy gradientu radialnego (w kształcie koła) jako warstwy maski dla naszego obrazu:
Przykład
Użyj gradientu promieniowego jako warstwy maskującej (koła):
.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%);
}
Tutaj używamy gradientu radialnego (w kształcie elipsy) jako warstwy maskującej dla naszego obrazu:
Przykład
Użyj innego gradientu promieniowego jako warstwy maskującej (elipsy):
.mask3 {
-webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0,
0, 0, 0.5) 50%);
mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0,
0, 0.5));
}
Użyj SVG jako warstwy maski
Element SVG <mask>może być używany wewnątrz grafiki SVG do tworzenia efektów maskowania.
Tutaj używamy <mask>elementu SVG do tworzenia różnych warstw maski dla naszego obrazu:
Przykład
Warstwa maski SVG (utworzona jako trójkąt):
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
Przykład
Warstwa maski SVG (utworzona jako gwiazda):
<svg width="600" height="400">
<mask id="svgmask2">
<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(#svgmask2)"></image>
</svg>
Przykład
Warstwa maski SVG (utworzona jako koła):
<svg width="600" height="400">
<mask
id="svgmask3">
<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(#svgmask3)"></image>
</svg>
Właściwości maskowania CSS
W poniższej tabeli wymieniono wszystkie właściwości maskowania CSS:
| Property | Description |
|---|---|
| mask-image | Specifies an image to be used as a mask layer for an element |
| mask-mode | Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask |
| mask-origin | Specifies the origin position (the mask position area) of a mask layer image |
| mask-position | Sets the starting position of a mask layer image (relative to the mask position area) |
| mask-repeat | Specifies how the mask layer image is repeated |
| mask-size | Specifies the size of a mask layer image |