Hintergründe festlegen
Hier sind mehrere Möglichkeiten, Hintergründe auf slidde.co festzulegen. CSS-Hintergründe können auf jedem Element in slidde.co festgelegt werden.
CSS-Hintergrund
Dies ist der häufigste Anwendungsfall.
Eine Ersatzfarbe, wenn Ihr Hintergrundbild geladen wird oder ein Teil Ihres Hintergrundbildes transparent ist:
backgroundColor: #000
Die Bild-URL kann mit slidde.co hochgeladen werden. Sie können hier auch CSS-Verläufe verwenden, und slidde.co bietet einige Verlaufsvoreinstellungen auf eine No-Code-Weise:
backgroundImage: url("your_image_url")
Sie können "cover" meistens verwenden, um sicherzustellen, dass Ihr Hintergrund alle Bilder abdeckt:
backgroundSize: cover
Wenn backgroundSize: "cover" einen wichtigen Teil Ihres Bildes verdeckt, können Sie deren Positionen anpassen:
backgroundPosition: 50% 10px
Wenn Ihr Hintergrundbild kein wiederholbares Muster ist, können Sie dies auf no-repeat setzen:
backgroundRepeat: no-repeat
Steuert, ob das Hintergrundbild sich bewegt, wenn Sie eine Seite nach unten scrollen. Normalerweise benötigen Sie ein statisches Foto, das dem Scrollen nicht folgt, da es die Seite abdeckt:
backgroundAttachment: fixed
Sie können die MDN-Dokumentation für detailliertere Informationen einsehen.
Hintergründe animieren
Wenn Sie CSS backgroundImage verwenden, können Sie dessen backgroundPosition leicht animieren. Hier ist ein Beispiel.
duration: 1500ms
delay: 800ms
easing: easeOutCubic
0% { backgroundPositionY: -36vw; }
100% { backgroundPositionY: 0; }
Sie können auch andere CSS-Eigenschaften animieren.
Wenn Sie jedoch Dinge wie CSS opacity animieren müssen, können Sie es nicht direkt animieren. Da opacity auf das gesamte Element angewendet wird. Sie sollten stattdessen imageElement in Erweiterter Hintergrund verwenden und target auf &>*:first-child setzen, um dies nur auf das Bildelement anzuwenden.
Erweiterte Hintergründe
Dies gilt für Page Slide Container. Sie können auf Erweiterter Hintergrund klicken und die folgenden Optionen auswählen.
Bild-Element-Hintergründe - Filter auf Hintergrundbild einstellen
Klicken Sie auf Erweiterter Hintergrund und wählen Sie imageElement. Es wird ein separates HTML-Element <div><img /></div> innerhalb des Containers als erstes Element erstellt.
Dann können Sie CSS-Eigenschaften wie Filter darauf anwenden. Zum Beispiel gibt es hier 3 Möglichkeiten, mehr Kontrast zwischen dem Hintergrundbild und dem Vordergrundtext zu schaffen, um die Lesbarkeit zu verbessern.
filter: grayscale(0.5)
filter: brightness(0.5)
filter: blur(5px)
Überprüfen Sie die MDN-Dokumentation für eine ausführlichere Einführung.
Animierte Hintergründe
Klicken Sie auf Erweiterter Hintergrund und wählen Sie animated.
Es gibt verschiedene animierte Hintergrund-Voreinstellungen, die Sie auswählen können.
Normalerweise können Sie die backgroundColor backgroundImage des animierten Hintergrunds konfigurieren. Einige Voreinstellungen haben auch CSS-Variablen, mit denen Sie die Farbe, den Abstand oder die Animationsdauer konfigurieren können.
Wiederholbare Muster-Hintergründe
Klicken Sie auf Erweiterter Hintergrund und wählen Sie pattern.
- Wählen Sie einen Mustertyp aus
- Dann können Sie die Optionen des Musters anpassen. Und Sie können versuchen, auf die Schaltfläche
Inspire mezu klicken, um zu sehen, welches zufällige Muster es Ihnen gibt.
Es wird ein separates HTML-Element <div><svg width="100%" height="100%" .../></div> innerhalb erstellt. Das bedeutet, dass Sie auch dessen CSS-Eigenschaften anpassen können, wie opacity, filter oder sogar backgroundImage, um dem SVG-Elternelement einen Farbverlaufshintergrund hinzuzufügen. Und Sie können das SVG auch animieren.
YouTube-Video-Hintergründe
Klicken Sie auf Erweiterter Hintergrund und wählen Sie youtubeElement. Es wird ein separates HTML-Element <div><iframe /></div> erstellt, um ein YouTube-Video einzubetten. Sie können dort Ihren YouTube-URL-Link einfügen.
Derzeit sind nur YouTube-Elemente erlaubt, da es eine bessere Streaming-Optimierung bietet als das Hosten unseres eigenen Videos. Wenn Sie einen benutzerdefinierten Video-Upload benötigen, lassen Sie es uns bitte über die Feedback-Schaltfläche in der Navigationsleiste wissen.