Stili di sfondo - Aiuto Webflow
Una panoramica degli stili di sfondo che puoi impostare su un elemento: colore, immagini, gradienti, sovrapposizioni di colore e video.
Colore di sfondo
Puoi impostare un colore di sfondo su qualsiasi elemento tranne immagini e video (anche se puoi usare immagini e video come sfondi). Aggiungi un colore di sfondo inserendo un valore di colore (ad es., hex, rgba o nome del colore) o utilizzando il selettore di colori. Puoi anche aggiungere colore di sfondo a elementi di testo o a contenuti di testo specifici all'interno di un elemento di testo.
Se desideri che i colori di sfondo siano coerenti in tutto il tuo sito, utilizza il tag Body (Tutte le pagine) per l'ereditarietà. Stilizzalo selezionando l'elemento Body e scegliendo il tag nel pannello Stile o utilizzando il menu di ereditarietà. Qualsiasi modifica al Body (Tutte le pagine) sarà predefinita per i nuovi elementi.
La maggior parte degli elementi ha uno sfondo trasparente per impostazione predefinita. Alcuni elementi, come il componente Slider, hanno un colore predefinito che puoi sovrascrivere.
Immagine di sfondo
Webflow offre molte opzioni per personalizzare la tua immagine di sfondo.
Per aggiungere o modificare l'immagine di sfondo:
- Scorri fino a Sfondi nel pannello Stile
- Clicca su Scegli immagine dal pannello Asset
- Seleziona la casella per @2x per immagini più nitide su dispositivi HiDPI
Per impostare un video di sfondo, utilizza il componente video di sfondo nel pannello Aggiungi.
Dimensione immagine di sfondo
- Personalizzato: Imposta valori di larghezza/altezza o percentuali. Scala più grande con valori superiori al 100%.
- Copri: Riempie e copre lo sfondo, possibilmente ritagliando l'immagine.
- Contieni: Mantiene l'immagine contenuta all'interno dell'elemento.
Posizione dell'immagine di sfondo
Il default è in alto a sinistra. Puoi regolare manualmente le posizioni (px, %, VW, VH).
Piastrellatura
Le immagini di sfondo si ripetono verticalmente e orizzontalmente per default. Controlla per ripetere orizzontalmente, verticalmente o per niente.
Fisso o scorrevole
Scegli Non fisso (l'immagine scorre) o Fisso (l'immagine rimane in posizione). Le immagini Fisse sono contenute dal viewport.
Gradienti
I gradienti possono essere usati da soli o stratificati su colore/immagine di sfondo. Due tipi:
- Gradienti lineari
- Gradienti radiali
Entrambi hanno punti di arresto dove i colori sfumano.
Gradiente lineare
Imposta la direzione tramite angolo con quadrante, frecce (incrementi di 45 gradi) o inserimento manuale.
Punti di arresto del gradiente
Modifica colore/opacità ai punti di arresto. Stratificando su immagine rende visibile l'immagine a opacità inferiore. Aggiungi punti cliccando. Rimuovi trascinando fuori.
Ripeti
Attiva/disattiva per ripetere il gradiente.
Inverti
Icona per invertire le posizioni dei punti di arresto.
Gradiente radiale
Crea un gradiente circolare. Il punto di arresto a sinistra è il colore al centro.
Posizione
Scegli il punto focale tramite punti o manualmente con valori/unità.
Dimensione
Controlli preimpostati:
- Lato più vicino: centro al lato più vicino
- Angolo più vicino: centro all'angolo più vicino
- Lato più lontano: centro al lato più lontano
- Angolo più lontano: (default)
Sovrapposizione di colore
Aggiungi una sovrapposizione di colore agli sfondi con selettore di colore e opacità.
Stratificazione di immagini e gradienti
Sovrapponi più immagini di sfondo, gradienti e sovrapposizioni per effetto. Riordina trascinando, attiva/disattiva visibilità con icona occhio, elimina con cestino.
Video di sfondo
I video di sfondo sono video silenziosi e in loop per aggiungere un tocco cinematografico. Attenzione:
Aggiungi con Ricerca rapida (CMD/CTRL+E) o Pannello Aggiungi > Componenti. Carica il tuo video (<30MB; webm, mp4, mov, ogg). I nomi dei file devono evitare spazi/caratteri speciali.
La transcodifica avviene dopo il caricamento (mp4 & webm per supporto browser).
Impostazioni video
- Ripeti video: si ripete continuamente.
- Avvio automatico video: inizia al caricamento della pagina.
- Includi pulsante play/pausa: il visitatore può controllare la riproduzione.
Anteprima del video di sfondo
- Passa il mouse sulla miniatura
- Apri in una nuova scheda
- Icona di anteprima nella barra
Sostituzione del video di sfondo
Apri le impostazioni per sostituire il video, transcodificare, visualizzare in anteprima, ecc.
Utilizzo del video di sfondo come sezione
Inserisci contenuti all'interno dell'elemento Video di sfondo. Stile come al solito nel pannello Stile.
Sovrapposizione video di sfondo
Aggiungi una sovrapposizione a gradiente o solida per contrasto. La sovrapposizione si trova sopra il video, sotto il contenuto.
Ecco come utilizzare gli sfondi in Webflow!