Impostare gli sfondi

Ecco diversi modi per impostare gli sfondi su slidde.co. Gli sfondi CSS possono essere impostati su qualsiasi elemento in slidde.co

Sfondo CSS

Questo è il caso d'uso più comune.

Un colore di riserva quando la tua immagine di sfondo è in caricamento o parte della tua immagine di sfondo è trasparente:

backgroundColor: #000

L'URL dell'immagine può essere caricato utilizzando slidde.co. Puoi anche usare gradienti CSS qui, e slidde.co fornisce alcuni preset di gradienti in modo no-code:

backgroundImage: url("your_image_url")

Puoi usare "cover" la maggior parte delle volte per assicurarti che il tuo sfondo copra tutte le immagini:

backgroundSize: cover

Se backgroundSize: "cover" nasconde una parte importante della tua immagine, puoi regolare le loro posizioni:

backgroundPosition: 50% 10px

Se la tua immagine di sfondo non è un pattern ripetibile, puoi impostarla su no-repeat:

backgroundRepeat: no-repeat

Controlla se l'immagine di sfondo si muove quando scorri verso il basso una pagina. Di solito, avresti bisogno di una foto statica che non segua lo scorrimento perché copre la pagina:

backgroundAttachment: fixed

Puoi controllare i documenti MDN per informazioni più approfondite

Animare gli sfondi

Se stai usando backgroundImage CSS, allora puoi facilmente animare la sua backgroundPosition. Ecco un esempio.

duration: 1500ms
delay: 800ms
easing: easeOutCubic
0% { backgroundPositionY: -36vw; }
100% { backgroundPositionY: 0; }

Puoi anche animare altre proprietà CSS.

Tuttavia, se hai bisogno di animare cose come l'opacity CSS, non puoi animarla direttamente. Poiché opacity si applica all'intero elemento. Dovresti usare imageElement in Sfondo avanzato invece, e impostare target su &>*:first-child per applicarlo solo all'elemento immagine.

Sfondi avanzati

Questo si applica a Page Slide Container. Puoi cliccare su Sfondo avanzato e selezionare le seguenti opzioni.

Sfondi con elementi immagine - Impostazione dei filtri sull'immagine di sfondo

Clicca su Sfondo avanzato e seleziona imageElement. Verrà creato un elemento HTML separato <div><img /></div> all'interno del contenitore come primo elemento.

Puoi quindi applicare proprietà CSS come il filtro. Ad esempio, ecco 3 modi per creare più contrasto tra l'immagine di sfondo e il testo in primo piano per migliorare la leggibilità.

filter: grayscale(0.5)

filter: brightness(0.5)

filter: blur(5px)

Consulta la documentazione MDN per un'introduzione più approfondita.

Sfondi animati

Clicca su Sfondo avanzato e seleziona animated.

Ci sono vari preset di sfondi animati tra cui puoi scegliere.

Di solito puoi configurare il backgroundColor backgroundImage dello sfondo animato. Alcuni preset hanno anche variabili CSS che ti permettono di configurare il colore, la spaziatura o la durata dell'animazione.

Sfondi a motivo ripetibile

Clicca su Sfondo avanzato e seleziona pattern.

1. Seleziona un tipo di motivo
2. Poi puoi personalizzare le opzioni del motivo. E puoi provare a cliccare il pulsante Insipre me per vedere quale motivo casuale ti offre.

Verrà creato un elemento HTML separato <div><svg width="100%" height="100%" .../></div> all'interno. Ciò significa che puoi anche regolare le sue proprietà CSS, come opacity, filter, o persino backgroundImage per aggiungere uno sfondo sfumato all'elemento genitore svg. E puoi anche animare l'SVG.

Sfondi video di YouTube

Clicca su Sfondo avanzato e seleziona youtubeElement. Verrà creato un elemento HTML separato <div><iframe /></div> all'interno per incorporare un video di YouTube. Puoi incollare lì il tuo link URL di YouTube.

Attualmente sono consentiti solo elementi YouTube. Poiché offre una migliore ottimizzazione dello streaming rispetto all'hosting di un nostro video. Se hai bisogno di caricare un video personalizzato, faccelo sapere tramite il pulsante di feedback nella barra di navigazione.