product icon
Dokumentation
Sprache auswählen
EnglishEspañolPortuguês do BrasilDeutschFrançaisעִבְרִית日本語ItalianoNederlandsРусскийTürkçeBahasa Indonesia简体中文繁體中文한국어العربيةSvenska

Hintergründe festlegen

Last updated on 11/1/2024@mrbirddev

Hier sind mehrere Möglichkeiten, Hintergründe auf slidde.co festzulegen. CSS-Hintergründe können auf jedem Element in slidde.co festgelegt werden.

Statischer Fotohintergrund

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.

Filter auf Hintergrundbild anwenden

Dies gilt für Page Slide Container. Sie können auf Erweiterter Hintergrund klicken und imageElement auswählen. 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)

Sehen Sie sich die MDN-Dokumentation für eine ausführlichere Einführung an.

Wiederholbare Musterhintergründe

Dies gilt für Page Slide Container. Sie können auf Erweiterter Hintergrund klicken und ein Muster auswählen.

  1. Wählen Sie einen Mustertyp aus.
  2. Dann können Sie die Optionen des Musters anpassen. Sie können auch auf die Schaltfläche Inspiriere mich klicken, um zu sehen, welches zufällige Muster Ihnen angezeigt wird.

Es wird ein separates HTML-Element <div><svg width="100%" height="100%" .../></div> 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. Sie können das SVG auch animieren.

Video-Hintergründe

Dies gilt für Page Slide Container. Sie können auf Erweiterter Hintergrund klicken und YouTube auswählen. 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 sie eine bessere Streaming-Optimierung bieten als das Hosten eines eigenen Videos. Wenn Sie ein benutzerdefiniertes Video hochladen möchten, lassen Sie es uns bitte über die Feedback-Schaltfläche in der Navigationsleiste wissen.

Animierte Hintergründe

Wenn Sie CSS backgroundImage verwenden, können Sie dessen backgroundPosition einfach 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 für das gesamte Element gilt. Sie sollten stattdessen imageElement in Erweiterter Hintergrund verwenden und target auf &>*:first-child setzen, um dies nur auf das Bildelement anzuwenden.

Loading...