Maskowanie CSS

Używając CSS zasłony, możesz utworzyć warstwę zasłony i umieścić ją na elemencie, aby częściowo lub całkowicie ukryć pewne części elementu.

właściwość mask-image

CSS mask-image Właściwość określa obraz warstwy zasłony.

Obrazem zasłony może być obraz PNG, obraz SVG,Przejście CSS lub Element <mask> SVG.

Wsparcie przeglądarek

Liczby w tabeli oznaczają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

z -webkit- Liczby przedprefiksem oznaczają pierwszą wersję, która obsługuje ten prefiks.

Użyj obrazu jako warstwy zasłony

Aby użyć obrazu PNG lub SVG jako warstwy zasłony, użyj url() Przekazuj wartości do obrazu warstwy zasłony.

Obraz zasłony musi mieć obszary przezroczyste lub półprzezroczyste. Czarny oznacza całkowitą przezroczystość.

To jest obraz zasłony, który będziemy używać (obraz PNG):

To jest obraz z Wzgórz Cinque Terre:

Teraz zastosujemy obraz zasłony (powyższy obraz PNG) jako warstwę zasłony obrazu Wzgórz Cinque Terre:

Przykład

Poniżej znajduje się kod źródłowy:

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

Spróbuj sam

przykład wyjaśnia

mask-image Atrybut określa obraz używany jako maska elementu.

mask-repeat Atrybut określa, czy obraz maski będzie się powtarzać lub w jaki sposób się powtarzać. Wartość no-repeat oznacza, że obraz maski nie będzie się powtarzać (obraz maski zostanie wyświetlony tylko raz).

inny przykład

Jeśli pominie się mask-repeat Atrybut, maska obrazu będzie powtarzać się na całym obrazie Wuyancun:

Przykład

Poniżej znajduje się kod źródłowy:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
}

Spróbuj sam

Używamy stopniowania jako maski

CSS liniowe i promieniowe stopniowanie mogą być używane jako obrazy maski.

przykład liniowego stopniowania

Tutaj używamy liniowego stopniowania jako maski obrazu. Ta liniowa maska przechodzi od góry (czarnego) do dołu (przezroczystego):

Przykład

Używamy liniowego stopniowania jako maski:

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}

Spróbuj sam

Tutaj używamy liniowego stopniowania i tekstu jako maski obrazu:

Przykład

używamy liniowego stopniowania i tekstu jako maski:

.mask1 {
  max-width: 600px;
  height: 350px;
  overflow-y: scroll;
  background: url(wuhan.jpg) no-repeat;
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient (black, transparent);
}

Spróbuj sam

przykład promieniowego stopniowania

Tutaj używamy promieniowego stopniowania (w kształcie okręgu) jako maski obrazu:

Przykład

używamy promieniowego stopniowania jako maski (okrągłej):

.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%);
}

Spróbuj sam

W tym miejscu używamy radialnego gradientu (kształt ellipsy) jako nakrycia obrazu:

Przykład

Użycie innego radialnego gradientu jako nakrycia (ellipsa):

.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) 50%);
}

Spróbuj sam

Użycie SVG jako nakrycia

Element SVG <mask> może być używany wewnątrz SVG do tworzenia efektów nakrycia.

W tym miejscu używamy elementu SVG <mask> do tworzenia różnych nakryć dla obrazu:

Przykład

SVG nakrycie (kształt trójkątny):

<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="wuhan.jpg" mask="url(#svgmask1)"></image>
</svg>

Spróbuj sam

Przykład

SVG nakrycie (kształt gwiazdowy):

<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="wuhan.jpg" mask="url(#svgmask2)"></image>
</svg>

Spróbuj sam

Przykład

SVG nakrycie (kształt kolisty):

<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="wuhan.jpg" mask="url(#svgmask3)"></image>
</svg>

Spróbuj sam