Come faccio a creare più sfondi fissi nel mio file CSS?

Cascading Style Sheets (CSS) livello 3, noto anche come CSS3, introduce il supporto per più immagini di sfondo. Puoi elencare più immagini di sfondo, separandole ciascuna con una virgola, e impostarne la visualizzazione utilizzando le proprietà dello sfondo come "background-position" e "background-repeat". Finché ogni set di valori corrisponde all'ordine degli URL delle immagini, queste proprietà produrranno gli effetti desiderati. Puoi anche utilizzare "allegato di sfondo" per fissare uno sfondo sullo schermo quando gli utenti scorrono verso l'alto o verso il basso.

1

Apri la tua pagina Web in Blocco note o un editor di codice per vedere il suo codice. Cerca l'elemento HTML in cui desideri applicare i molteplici sfondi fissi e trova il suo nome ID:

Soddisfare...

2

Scorri fino alla parte superiore del codice e individua il tag "" che fa riferimento al tuo foglio di stile:

Trova il nome del foglio di stile che desideri modificare nell'attributo "href" del tag "". Se il tuo codice include più tag "", cerca quello che punta al tuo foglio di stile generale piuttosto che a file con nomi come "print" o "IE".

3

Apri il foglio di stile in Blocco note o nel tuo editor di codice. Cerca il nome ID del tuo elemento HTML nel codice. Aggiungi questo selettore in fondo al codice se non lo trovi:

}

4

Imposta la proprietà "background-image" tra le parentesi graffe dopo il selettore:

immagine di sfondo: URL (percorso / a / primo-bg.png), URL (percorso / a / secondo-bg.png);

}

Separa ogni URL con una virgola per elencare più immagini di sfondo. Imposta il percorso all'interno di ciascuna parentesi sull'URL di un'immagine di sfondo che desideri utilizzare.

5

Inizia una riga vuota sotto "immagine di sfondo" e aggiungi la proprietà "posizione di sfondo":

background-position: in alto a sinistra, 100px 200px;

Imposta la posizione di ogni sfondo nello stesso ordine in cui appaiono nell'elenco URL "immagine di sfondo". Nell'esempio sopra, il "first-bg.png" è impostato per essere visualizzato nell'angolo in alto a sinistra dell'elemento HTML. Il "secondo-bg.png" visualizzerà quindi 100 pixel dall'alto verso il basso e 200 pixel dal bordo sinistro dell'elemento HTML. Puoi anche utilizzare valori percentuali come "80% 20%".

6

Imposta "background-attachment" sotto la proprietà "background-position":

sfondo-allegato: fisso, scorrimento;

Utilizzare "fisso" quando si desidera che un'immagine di sfondo rimanga sullo schermo anche mentre l'utente scorre la pagina Web verso l'alto o verso il basso. L'impostazione predefinita è "scorri".

7

Aggiungi una nuova riga sotto "background-attachment" e aggiungi la proprietà "background-repeat". Imposta questa proprietà su "no-repeat" per ogni immagine di sfondo che non desideri affiancare:

background-repeat: no-repeat, repeat-x;

Usa "repeat-x" o "repeat-y" per ripetere un'immagine lungo l'asse "Y" (verticale) o "X" (orizzontale) di un elemento HTML.

messaggi recenti

$config[zx-auto] not found$config[zx-overlay] not found