Hintergrundstile - Webflow Hilfe
Eine Übersicht über die Hintergrundstile, die Sie auf ein Element anwenden können: Farbe, Bilder, Verläufe, Farbüberlagerungen und Videos.
Hintergrundfarbe
Sie können eine Hintergrundfarbe für jedes Element außer für Bilder und Videos festlegen (obwohl Sie Bilder und Videos als Hintergründe verwenden können). Fügen Sie eine Hintergrundfarbe hinzu, indem Sie einen Farbwert eingeben (z. B. Hex, RGBA oder Farbname) oder den Farbwähler verwenden. Sie können auch Text-Elementen oder spezifischem Textinhalt innerhalb eines Text-Elements eine Hintergrundfarbe hinzufügen.
Wenn Sie möchten, dass Hintergrundfarben auf Ihrer gesamten Website konsistent sind, verwenden Sie das Body (Alle Seiten)-Tag für die Vererbung. Stylen Sie es, indem Sie das Body-Element auswählen und das Tag im Stil-Panel oder über das Vererbungsmenü wählen. Änderungen am Body (Alle Seiten) werden standardmäßig auf neue Elemente angewendet.
Die meisten Elemente haben standardmäßig einen transparenten Hintergrund. Einige Elemente, wie die Slider-Komponente, haben eine Standardfarbe, die Sie überschreiben können.
Hintergrundbild
Webflow bietet viele Optionen zur Anpassung Ihres Hintergrundbildes.
Um das Hintergrundbild hinzuzufügen oder zu ändern:
- Scrollen Sie zu Hintergründe im Stil-Panel
- Klicken Sie auf Bild auswählen im Asset-Panel
- Aktivieren Sie das Kästchen für @2x für schärfere Bilder auf HiDPI-Geräten
Um ein Hintergrundvideo festzulegen, verwenden Sie die Hintergrundvideo-Komponente im Hinzufügen-Panel.
Hintergrundbildgröße
- Benutzerdefiniert: Breiten-/Höhen- oder Prozentwerte festlegen. Größer skalieren mit Werten über 100%.
- Cover: Füllt und bedeckt den Hintergrund, möglicherweise wird das Bild beschnitten.
- Contain: Hält das Bild innerhalb des Elements.
Hintergrundbildposition
Standard ist oben links. Sie können Positionen manuell anpassen (px, %, VW, VH).
Kacheln
Hintergrundbilder wiederholen sich standardmäßig vertikal und horizontal. Steuerung, um horizontal, vertikal oder gar nicht zu wiederholen.
Fixiert oder scrollend
Wählen Sie Nicht fixiert (Bild scrollt) oder Fixiert (Bild bleibt an Ort und Stelle). Fixierte Bilder werden vom Ansichtsfenster begrenzt.
Verläufe
Verläufe können allein oder in Schichten auf Hintergrundfarbe/-bild verwendet werden. Zwei Typen:
- Lineare Verläufe
- Radiale Verläufe
Beide haben Stopps (Punkte), an denen Farben verblassen.
Linearer Verlauf
Richtung durch Winkel über Zifferblatt, Pfeile (45-Grad-Schritte) oder Feldeingabe festlegen.
Verlaufsstopps
Farbe/Deckkraft an Stopps bearbeiten. Über Bild schichten macht Bild bei niedrigerer Deckkraft sichtbar. Stopps durch Klicken hinzufügen. Durch Herausziehen entfernen.
Wiederholen
Schalter zum Wiederholen des Verlaufs.
Umkehren
Symbol zum Umkehren der Stopp-Positionen.
Radialer Verlauf
Erzeugt kreisförmigen Verlauf. Linker Stopp ist Farbe im Zentrum.
Position
Wählen Sie den Brennpunkt über Punkte oder manuell mit Werten/Einheiten.
Größe
Voreingestellte Steuerungen:
- Nächste Seite: Zentrum zur nächsten Seite
- Nächste Ecke: Zentrum zur nächsten Ecke
- Entfernteste Seite: Zentrum zur entferntesten Seite
- Entfernteste Ecke: (Standard)
Farbüberlagerung
Farbüberlagerung zu Hintergründen mit Farbwähler und Deckkraft hinzufügen.
Bilder und Verläufe schichten
Mehrere Hintergrundbilder, Verläufe und Überlagerungen für Effekt stapeln. Mit Drag umordnen, Sichtbarkeit mit Augensymbol umschalten, mit Papierkorb löschen.
Hintergrundvideo
Hintergrundvideos sind stumme, sich wiederholende Videos für Hintergründe, um filmischen Flair hinzuzufügen. Beachten Sie:
Hinzufügen mit Schnellsuche (CMD/CTRL+E) oder Hinzufügen-Panel > Komponenten. Laden Sie Ihr Video hoch (<30MB; webm, mp4, mov, ogg). Dateinamen sollten keine Leerzeichen/Sonderzeichen enthalten.
Die Transkodierung erfolgt nach dem Hochladen (mp4 & webm für Browserunterstützung).
Videoeinstellungen
- Video schleifen: wiederholt sich kontinuierlich.
- Video automatisch abspielen: startet beim Laden der Seite.
- Abspiel-/Pause-Taste einfügen: Besucher können die Wiedergabe steuern.
Hintergrundvideo-Vorschau
- Thumbnail schweben
- In neuem Tab öffnen
- Vorschau-Symbol in der Leiste
Hintergrundvideo ersetzen
Öffnen Sie die Einstellungen, um das Video zu ersetzen, zu transkodieren, eine Vorschau anzuzeigen usw.
Hintergrundvideo als Abschnitt verwenden
Inhalt in das Hintergrundvideo-Element einfügen. Wie gewohnt im Stil-Panel gestalten.
Hintergrundvideo-Overlay
Fügen Sie einen Farbverlauf oder eine feste Überlagerung für Kontrast hinzu. Die Überlagerung sitzt über dem Video, unter dem Inhalt.
Und so verwendet man Hintergründe in Webflow!