Hintergrundeinstellungen

Überlagerung

Kernpunkt:
Legt eine Farbfläche über den Hintergrund.

Auswirkung:
Verbessert Lesbarkeit auf Bildern und Videos, indem Helligkeitsschwankungen abgefangen werden.

Praxis-Tipp:
Mit einer Volltonfarbe und moderater Deckkraft starten, erst danach bei Bedarf auf Verläufe erweitern.

Einstellungen

• Farbe / Gradient: Vollton oder Verlauf für das Überlagerung.
• Deckkraft: Stärke des Überlagerungs.
• Mischmodus: Mischmodus zur Feinabstimmung mit Hintergrund und Text.
• Zurücksetzen: Setzt nur diesen Bereich zurück.
• Responsiv: Geräteabhängige Werte.

Das Überlagerung liegt als oberste Ebene über dem Hintergrund und ist deshalb der wichtigste Hebel für Textlesbarkeit.

Muster

Kernpunkt:
Fügt eine dezente Struktur im Hintergrund hinzu.

Auswirkung:
Verhindert einen flachen Look und gibt der Fläche mehr Tiefe.

Praxis-Tipp:
Kontrast zurückhaltend halten, damit der Knopf-Text dominant bleibt.

Einstellungen

• Mustertyp
• Musterfarbe
• Mustergröße
• Musterdeckkraft
• Mischmodus
• Responsiv

Muster werden als SVG gerendert und bleiben dadurch auch auf hochauflösenden Displays scharf.

Bild

Kernpunkt:
Steuert Darstellung von Bild- und Videohintergründen.

Auswirkung:
Fit, Position und Wiederholung verändern die Wirkung derselben Medien stark.

Praxis-Tipp:
Reihenfolge für schnelles Feintuning: zuerst Fit-Methode, dann Position, dann Lesbarkeit über Überlagerung/Deckkraft.

Einstellungen

• Medientyp (Bild / Video)
• Bild: Auswahl, Wiederholen, Anpassungsmethode, Rotation (Grad), Deckkraft
• Video: Video URL (MP4 / YouTube / Vimeo), Anwenden
• Videoanzeige: Video Fit, Video Position X, Video Position Y
• Poster: Poster URL, Poster entfernen, Poster Fit, Poster Position X/Y
• Responsiv

Ebenenreihenfolge von unten nach oben: Farbe -> Bild -> Muster -> Überlagerung. Bild und Video werden nicht gleichzeitig dargestellt.

Mobile-Videoeinschränkung:
Autoplay hängt von Browserregeln ab (insbesondere iOS/Android). Ein Posterbild als Fallback wird empfohlen.

Farbe

Kernpunkt:
Basisfarbe der gesamten Hintergrundkomposition.

Auswirkung:
Sie beeinflusst zusammen mit Überlagerung und Textfarbe den finalen Kontrast.

Praxis-Tipp:
Nicht nur „schöne Farbe" wählen, sondern primär Lesbarkeit absichern.

Einstellungen

• Farbe / Gradient
• Alpha
• Gradient-Umschaltung
• Zurücksetzen
• Responsiv

Hover-Farbe kann separat gesetzt werden. Wechsel zwischen Vollton und Verlauf wird als Layer-Fade sauber animiert.

Übergang

Kernpunkt:
Definiert die Geschwindigkeit von Normal- zu Hover-Zustand.

Auswirkung:
Bestimmt, wie direkt und hochwertig sich die Interaktion anfühlt.

Praxis-Tipp:
200-350ms als Ausgangspunkt, Verzögerung nur gezielt einsetzen.

Einstellungen

• Dauer (ms)
• Verzögerung (ms)
• Beschleunigung
• Benutzerdefinierter Wert (cubic-bezier)
• Zurücksetzen

Diese Übergang gilt für Überlagerung, Muster, Bild/Video und Farbe und ist unabhängig von der Übergang im Stil-Panel.

Abgrenzung zu Thumbnail/Band:
Das Hintergrund-Panel steuert die flächige Basis des gesamten Knopfs. Einstellungen wie eigene Breite/Höhe, Rahmen, Radius, Position oder Skew gehören zu Thumbnail bzw. Band.