Treści z teksturą wizualną

Funkcje internetowe: Maski

Przegląd

Aby zastosować realistyczne wzory tekstur lub efektów pogodowych (np. grunge, szum lub teksturę papieru) do elementu, użyj maskowania CSS (mask-image) z powtarzającym się obrazem tekstury. Dzięki temu możesz sprawić, że treść będzie wyglądać na teksturowaną, ponieważ jej części będą półprzezroczyste, a nie tylko pokryte teksturą. Dzięki temu wygląd materiału jest bardziej realistyczny.

Implementacja

Aby zastosować wzór tekstury:

To najczęstsza metoda tworzenia realistycznych tekstur.

.weathered-element {
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: url('grunge-pattern.png');
  -webkit-mask-repeat: repeat; /* Repeat the pattern to fill the area */
  -webkit-mask-size: 300px; /* Control the scale of the texture */

  /* Standard property for modern browsers */
  mask-image: url('grunge-pattern.png');
  mask-repeat: repeat;
  mask-size: 300px;
}

Metoda 2. Używanie gradientów CSS do tworzenia wzorów geometrycznych

Wzory możesz generować za pomocą gradientów CSS. Jest to samodzielny plik, który nie wymaga zewnętrznych plików graficznych.

.patterned-element {
  --checkerboard-gradient: 
    linear-gradient(45deg, #000 25%, transparent 25%), 
    linear-gradient(-45deg, #000 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #000 75%), 
    linear-gradient(-45deg, transparent 75%, #000 75%);

  /* Apply a checkerboard pattern as a mask */
  -webkit-mask-image: var(--checkerboard-gradient);
  -webkit-mask-size: 20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  
  mask-image: var(--checkerboard-gradient);
  mask-size: 20px 20px;
  mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

Tryby maskowania: alfa i luminancja

Domyślnie maski CSS używają mask-mode: match-source. Oznacza to, że przeglądarka automatycznie decyduje, czy użyć kanału alfa (przezroczystości) czy luminancji (jasności) maski, na podstawie rodzaju podanego źródła:

Typ źródła maski Domyślny tryb maskowania Zamaskowanie
Wbudowany element SVG <mask> luminance Przezroczystość jest określana przez jasność kolorów. Biały odsłania zawartość, czarny ją ukrywa, a szary tworzy półprzezroczystość.
Bezpośredni plik graficzny (np. plik PNG, SVG) alpha Nieprzezroczystość zależy od przezroczystości. Nieprzezroczyste części odsłaniają zawartość, a przezroczyste ją ukrywają.
Gradient CSS alpha Nieprzezroczystość jest określana przez przezroczystość. Nieprzezroczyste kolory (takie jak black) odsłaniają treści, a przezroczyste je ukrywają.

Strategie zastępcze

Jeśli przeglądarka nie obsługuje mask-image ani wersji z prefiksem:

  • Element będzie wyświetlany bez tekstury (czyste i jednolite wypełnienie).
  • Upewnij się, że treść jest nadal czytelna bez tekstury (progresywne ulepszanie).
  • Możesz użyć obrazu tła lub nakładki jako kreacji zastępczej, aby zasymulować teksturę, ale nie wpłynie to na przezroczystość samej treści.
/* Fallback: Use a background image for browsers without mask support */
@supports (not (mask-image: url(x))) and (not (-webkit-mask-image: url(x))) {
  .weathered-element {
    /* Fallback adds texture on top or behind, depending on implementation */
    background-image: url('grunge-pattern.svg');
    background-color: #fff; /* Ensure background is solid if needed */
  }
}