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 aby tworzyć interesujące efekty bez użycia edytora obrazów, jako maskę możesz użyć obrazu, pliku SVG lub gradientu.

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 posta dowiesz się, jak używać w CSS właściwości mask-image, która umożliwia wskazanie obrazu, który będzie używany jako warstwa maski. Masz do wyboru 3 opcje. Jako maski możesz użyć pliku graficznego, pliku SVG lub gradientu.

Zgodność z przeglądarką

Większość przeglądarek obsługuje tylko częściową właściwość maskowania CSS. Aby zapewnić najlepszą kompatybilność z przeglądarkami, musisz użyć prefiksu -webkit- oprócz standardowej usługi. Pełne informacje na temat obsługi przeglądarek znajdziesz w artykule Czy mogę używać masek CSS?.

Chociaż przeglądarki dobrze obsługują właściwości z prefiksem, jeśli używasz maskowania, aby tekst był widoczny na wierzchu obrazu, pamiętaj, co się stanie, gdy maskowanie nie będzie dostępne. Warto użyć zapytań o funkcję, aby wykryć obsługę mask-image lub -webkit-mask-image i zapewnić czytelną wartość zastępczą przed dodaniem wersji zamaskowanej.

@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 usługa 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, który jest półprzezroczysty, jednak umożliwia prześwitywanie części oryginalnego obrazu. Różnicę widać na poniższym filmie. Pierwsze zdjęcie to oryginalne zdjęcie balonów bez maski. Drugie zdjęcie ma zastosowaną maskę z białą gwiazdką 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 wykorzystać mały obraz jako powtarzający się wzór.

Maskowanie za pomocą SVG

Zamiast pliku obrazu jako maski możesz użyć pliku SVG. Można to osiągnąć 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 tylko Firefox jest jedyną przeglądarką, która obsługuje tę metodę.

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żywać dowolnego z obsługiwanych typów gradientów i dać upust swojej kreatywności. W tym przykładzie użyliśmy gradientu promieniowego, aby utworzyć okrągłą maskę, która oświetla napis.

Używanie wielu masek

Podobnie jak w przypadku obrazów tła, możesz określić wiele źródeł masek, łą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. Zwykle mają one wiele obrazów tła, więc 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;

Użycie wzorów gradientu do obrazów może przynieść wiele przyjemnych efektów. Spróbuj zremiksować Glitcha i wypróbuj 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.