Maskowanie w CSS umożliwia użycie obrazu jako warstwy maski. Oznacza to, że możesz użyć obrazu, pliku SVG lub gradientu jako maski, aby tworzyć ciekawe efekty bez edytora obrazów.
Gdy przytniesz element za pomocą właściwości clip-path, przycięty obszar stanie się niewidoczny.
Jeśli chcesz zamiast tego zaciemnić część obrazu lub zastosować inny efekt, musisz użyć maskowania.
Z tego artykułu dowiesz się, jak używać w CSS właściwości mask-image, która pozwala określić obraz do użycia jako warstwa maski.
Masz 3 opcje. Jako maski możesz użyć pliku graficznego, pliku SVG lub gradientu.
Zgodność z przeglądarką
Maskowanie CSS jest dostępne w wersji podstawowej, ale większość funkcji mask-image jest dostępna w starszych wersjach przeglądarki z prefiksem -webkit-mask-image.
Poniższe przykłady pokazują, jak używać obu usług razem, aby zapewnić najlepszą obsługę w przeglądarce.
Maskowanie za pomocą obrazu
Właściwość mask-image działa podobnie jak właściwość background-image.
Aby przekazać obraz, użyj wartości url().
Obraz maski musi zawierać przezroczysty lub półprzezroczysty obszar.
Całkowicie przezroczysty obszar spowoduje, że część obrazu pod nim będzie niewidoczna. Użycie obszaru półprzezroczystego spowoduje jednak, że część oryginalnego obrazu będzie widoczna. Różnicę widać w tym przykładzie kodu w CodePen.
- Pierwsze zdjęcie to oryginalne zdjęcie balonów bez maski.
- Drugie zdjęcie ma zastosowaną maskę z białą gwiazdą na całkowicie przezroczystym tle.
- Trzeci obraz przedstawia białą gwiazdę na tle z płynną przezroczystością.
W tym przykładzie użyto też właściwości mask-size o wartości cover.
Ta usługa działa tak samo jak background-size.
Użyj słów kluczowych cover i contain albo określ rozmiar tła, używając dowolnej prawidłowej jednostki długości lub procentu.
Możesz też powtórzyć maskę tak samo jak obraz tła, aby użyć małego obrazu jako powtarzającego się wzoru.
Maska z SVG
Zamiast pliku obrazu jako maski możesz użyć pliku SVG.
Możesz to zrobić na kilka sposobów.
Pierwszym jest umieszczenie wewnątrz pliku SVG elementu <mask> i odwołanie się do jego identyfikatora w właściwości mask-image.
.container img {
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
Zaletą tego podejścia jest to, że maskę można zastosować do dowolnego elementu HTML, a nie tylko do obrazu.
W najczęstszym przypadku maskowania obrazu możesz umieścić go w pliku SVG.
Pierwsze podejście to podstawa. Nowo dostępne, w tym obraz w pliku SVG, jest obsługiwane przez starsze przeglądarki, które obsługują wersję z przedrostkiem -webkit.
Maska z gradientem
Użycie gradientu CSS jako maski to elegancki sposób na uzyskanie zamaskowanej powierzchni bez konieczności tworzenia obrazu lub pliku SVG.
Gradient liniowy użyty jako maska może zapewnić, że dolna część obrazu nie będzie zbyt ciemna pod napisami.
Możesz użyć dowolnego obsługiwanego typu gradientu i stworzyć kreację, która będzie tak kreatywna, jak tylko chcesz. W tym przykładzie użyliśmy gradientu promieniowego, aby utworzyć okrągłą maskę, która oświetla napis.
Wiele masek
Podobnie jak w przypadku obrazów tła, możesz określić wiele źródeł maski, łącząc je, aby uzyskać pożądany efekt. Jest to szczególnie przydatne, jeśli chcesz użyć wzoru wygenerowanego za pomocą gradientów CSS jako maski. Zazwyczaj używają one wielu obrazów tła, dzięki czemu można je łatwo przekształcić w maskę.
Na przykład w tym wzorze z gradientami CSS występuje wzór szachownicy. Kod, który używa obrazów tła, wygląda tak:
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
Aby przekształcić ten lub inny wzór przeznaczony do obrazów tła w maskę, musisz zastąpić właściwości background-* odpowiednimi właściwościami mask, w tym tymi z przedrostkiem -webkit.
-webkit-mask-image:
linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
-webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
Stosując wzory gradientów do obrazów, można uzyskać naprawdę ładne efekty. Przetestuj inne warianty, korzystając z tego kodu w CodePen.
Oprócz przycinania masek CSS można używać do urozmaicania obrazów i innych elementów HTML bez konieczności korzystania z aplikacji graficznej.