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 fotografico statico

Questo è il caso d'uso più comune.

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

backgroundColor: #000

L'URL dell'immagine può essere caricato utilizzando slidde.co. Puoi anche utilizzare 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 motivo ripetibile, puoi impostarla su no-repeat:

backgroundRepeat: no-repeat

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

backgroundAttachment: fixed

Puoi consultare i documenti MDN per informazioni più approfondite.

Impostare filtri sull'immagine di sfondo

Questo si applica a Page Slide Container. Puoi cliccare su Sfondo avanzato e selezionare imageElement. Creerà un elemento HTML separato <div><img /></div> all'interno del contenitore come primo elemento.

Poi puoi applicare proprietà CSS come filter ad esso. 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 i documenti MDN per un'introduzione più approfondita.

Sfondo a Pattern Ripetibile

Questo si applica a Page Slide Container. Puoi cliccare su Sfondo avanzato e selezionare il pattern.

1. Seleziona un tipo di pattern
2. Poi puoi personalizzare le opzioni del pattern. Puoi provare a cliccare il pulsante Inspira me per vedere quale pattern casuale ti viene proposto.

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

Sfondo Video

Questo si applica a Page Slide Container. Puoi cliccare su Sfondo avanzato e selezionare YouTube. Verrà creato un elemento HTML separato <div><iframe /></div> per incorporare un video di YouTube. Puoi incollare lì il link URL di YouTube.

Attualmente sono consentiti solo elementi YouTube, poiché offrono 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.

Animare gli Sfondo

Se stai usando backgroundImage in CSS, 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 opacity in CSS, non puoi animarla direttamente. Poiché opacity si applica all'intero elemento. Dovresti usare imageElement in Sfondo avanzato e impostare target su &>*:first-child per applicarlo solo all'elemento immagine.