Stosuj efekty do obrazów z właściwością CSS's mask-image

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.

Rachel Andrew

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 umożliwia określenie obrazu do użycia jako warstwy maski. Masz 3 opcje. Jako maski możesz użyć pliku graficznego, pliku SVG lub gradientu.

Zgodność z przeglądarką

Większość przeglądarek obsługuje standardową właściwość maskowania CSS tylko częściowo. Aby zapewnić najlepszą kompatybilność z przeglądarkami, musisz użyć prefiksu -webkit- oprócz standardowej usługi. Aby uzyskać pełne informacje o obsłudze przeglądarek, przeczytaj artykuł Czy mogę używać masek CSS?.

Wprawdzie, że przeglądarki dobrze obsługują właściwości z prefiksem, jeśli używasz maskowania, aby tekst na obrazie był widoczny, zastanów się, co się stanie, jeśli maskowanie nie będzie dostępne. Warto użyć zapytań o funkcje, aby wykryć obsługę mask-image lub -webkit-mask-image, a przed dodaniem zamaskowanej wersji – podać czytelną wersję zastępczą.

@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
  /* code that requires mask-image here. */
}

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 tym obszarem będzie niewidoczna. Użycie obszaru półprzezroczystego spowoduje jednak, że część oryginalnego obrazu będzie widoczna. Różnicę możesz zobaczyć na poniższym filmie. 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żywam też właściwości mask-size o wartości cover. Ta usługa działa tak samo jak background-size. Możesz użyć słów kluczowych cover i contain lub określić 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.

Maskowanie za pomocą 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.

<svg width="0" height="0" viewBox="0 0 400 300">
  <defs>
    <mask id="mask">
      <rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
      <circle fill="#FFFFFF" cx="150" cy="150" r="100" />
      <circle fill="#FFFFFF" cx="50" cy="50" r="150" />
    </mask>
  </defs>
</svg>

<div class="container">
    <img src="balloons.jpg" alt="Balloons">
</div>

.container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  -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. Niestety Firefox jest jedyną przeglądarką, która obsługuje to podejście.

Nie wszystko jednak stracone, ponieważ w najczęstszym przypadku maskowania obrazu możemy umieścić obraz w pliku SVG.

Maskowanie za pomocą gradientu

Użycie gradientu CSS jako maski to elegancki sposób na uzyskanie zamaskowanej powierzchni bez konieczności tworzenia obrazu lub pliku SVG.

Prosty gradient liniowy użyty jako maska może zapewnić, że dolna część obrazu nie będzie zbyt ciemna pod tekstem.

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.

Korzystanie z wielu 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 artykule znalazłem ładny 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. Spróbuj zremiksować Glitcha i wypróbować inne warianty.

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.

Zdjęcie: Julio Rionaldo z Unsplash.