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

Maskowanie 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 przypniesz element za pomocą właściwości clip-path, przycięty obszar staje się niewidoczny. Jeśli zamiast tego chcesz, aby część obrazu była nieprzezroczysta lub zastosować do niego inny efekt, musisz użyć maskowania. Z tego posta dowiesz się, jak używać właściwości mask-image w CSS, co pozwala określić obraz, który będzie używany jako warstwa maski. Masz do wyboru 3 opcje. Możesz użyć pliku graficznego jako maski, SVG lub gradientu.

Zgodność z przeglądarką

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

Chociaż obsługa przeglądarek za pomocą właściwości z prefiksem jest przydatna, w przypadku używania maskowania, aby tekst na obrazie na obrazie był widoczny, zwróć uwagę na to, co się stanie, jeśli maskowanie będzie niedostępne. Warto skorzystać z zapytań o funkcję, aby wykryć obsługę mask-image lub -webkit-mask-image i udostępnienie czytelnej kreacji zastępczej przed dodaniem zamaskowanej wersji.

@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. Użyj wartości url(), aby przekazać obraz. Obraz maski musi mieć przezroczysty lub półprzezroczysty obszar.

W pełni przezroczysty obszar spowoduje, że znajdujący się pod nim fragment obrazu będzie niewidoczny. Użycie obszaru, który jest półprzezroczysty, jednak umożliwia prześwitywanie części oryginalnego obrazu. Różnica jest widoczna poniżej. Pierwszy to oryginalne zdjęcie balonów bez maski. Na drugim obrazie zastosowano maskę z białą gwiazdą na w pełni przezroczystym tle. Trzeci obraz przedstawia białą gwiazdę na tle z przezroczystością gradientu.

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 za pomocą dowolnej prawidłowej jednostki długości albo wartości procentowej.

Możesz również powtórzyć maskę tak samo jak obraz tła, mały obraz jako powtarzający się wzór.

Maskowanie za pomocą SVG

Zamiast maski użyj pliku graficznego. Można to osiągnąć na kilka sposobów. Pierwszym z nich jest umieszczenie elementu <mask> w pliku SVG i odwoływanie się do identyfikatora tego elementu we 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 stosować do dowolnego elementu HTML, a nie tylko do obrazu. Niestety tylko Firefox jest jedyną przeglądarką, która obsługuje tę metodę.

Nie wszystko jest jednak stracone, ponieważ w przypadku najczęstszego scenariusza maskowania obrazu możemy umieścić go w pliku SVG.

Maskowanie za pomocą gradientu

Użycie gradientu CSS jako maski to elegancki sposób na uzyskanie zamaskowanego obszaru bez konieczności rozwiązywania problemów z tworzeniem obrazu lub SVG.

Na przykład prosty gradient liniowy użyty jako maska może sprawić, że dolna część obrazu nie będzie zbyt ciemna pod podpisem.

Możesz używać dowolnego z obsługiwanych typów gradientów i dać upust swojej kreatywności. W kolejnym przykładzie użyto gradientu promieniowego do utworzenia okrągłej maski, która jest oświetlona za podpisem.

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, gdy chcesz użyć jako maski wzorca wygenerowanego z gradientami CSS. Zwykle mają one wiele obrazów tła, więc można je łatwo przekształcić w maskę.

Dla przykładu udało mi się znaleźć fajny wzór w szachownicę w tym artykule. Kod z obrazami 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 używany w obrazach tła w maskę, musisz zastąpić właściwości background-* odpowiednimi właściwościami mask, w tym -webkit z prefiksem.

-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ć błąd i wypróbuj inne odmiany.

Oprócz klipów, Maski CSS to sposób na wzbudzenie zainteresowania obrazami i innymi elementami HTML bez konieczności korzystania z aplikacji graficznej.

Zdjęcie: Julio Rionaldo na stronie Unsplash.