Visuelle Texturierung von Inhalten

Webfunktionen: Masken

Übersicht

Wenn Sie ein Element mit realistischen Verwitterungs- oder Texturmustern (z. B. Grunge, Rauschen oder Papiertextur) versehen möchten, verwenden Sie CSS-Maskierung (mask-image) mit einem sich wiederholenden Texturbild. So können Sie den Inhalt selbst strukturiert darstellen, indem Sie Teile davon halbtransparent machen, anstatt nur eine Textur darüberzulegen. Dadurch wird das Erscheinungsbild des physischen Materials realistischer.

Implementierung

So wenden Sie ein Texturmuster an:

Dies ist die gängigste Methode für realistische Texturen.

.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;
}

Methode 2: CSS-Verläufe für geometrische Muster verwenden

Sie können Muster mit CSS-Farbverläufen generieren. Diese ist eigenständig und erfordert keine externen Bilddateien.

.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;
}

Alpha- und Luminanzmaskenmodi

Standardmäßig wird für CSS-Masken mask-mode: match-source verwendet. Das bedeutet, dass der Browser automatisch entscheidet, ob der Alphakanal (Transparenz) oder die Luminanz (Helligkeit) der Maske verwendet werden soll, je nachdem, welche Art von Quelle Sie angeben:

Quelltyp der Maske Standardmaskierungsmodus Maskierungsverhalten
Inline-SVG-Element <mask> luminance Die Deckkraft wird durch die Helligkeit der Farben bestimmt. Weiß zeigt Inhalte an, Schwarz blendet sie aus und Grau erzeugt eine halbtransparente Darstellung.
Direkte Bilddatei (z.B. PNG- oder SVG-Datei) alpha Die Deckkraft wird durch die Transparenz bestimmt. Undurchsichtige Teile zeigen Inhalte, transparente Teile verbergen sie.
CSS Gradient alpha Die Deckkraft wird durch die Transparenz bestimmt. Undurchsichtige Farben (wie black) zeigen Inhalte an, transparente Farben verbergen sie.

Fallback-Strategien

Wenn ein Browser mask-image oder die Version mit Präfix nicht unterstützt:

  • Das Element wird ohne Textur angezeigt (saubere und einfarbige Füllung).
  • Achten Sie darauf, dass der Inhalt auch ohne die Textur lesbar ist (progressive Verbesserung).
  • Sie können ein Hintergrundbild oder ein Overlay als Fallback verwenden, um die Textur zu simulieren. Dies hat jedoch keine Auswirkungen auf die Transparenz des Inhalts selbst.
/* 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 */
  }
}