Utilizzando il codice di foglio di stile CSS, è possibile generare uno sfondo a strisce per un'intera pagina Web senza utilizzare qualsiasi grafica. Questo effetto utilizza gradienti livelli CSS con più color-stop e la proprietà "background-size" per rendere il gradiente ripetersi attraverso lo schermo. Il modo migliore per farlo è quello di iniziare con un colore di sfondo a tinta unita e fare uno dei tuoi gradi trasparente così il colore mostra attraverso. Quando i visitatori vedere Visualizza la tua pagina Web in browser meno recenti, vedranno la tinta unita.
Istruzioni
1
Aprire il file di foglio di stile CSS nel blocco note o un programma di modifica del codice. Aggiungere questa regola nella parte inferiore del file:
HTML () {
Altezza: 100%;
}
Questa regola rende possibile per riempire l'intero sfondo di una pagina Web con il gradiente di striscia che si creerà.
2
Impostare un colore di sfondo per la tua pagina Web all'interno di "{} html" per fornire un colore di base per il vostro strisce e un fallback per i browser meno recenti:
HTML () {
Altezza: 100%;
background-color: black;
}
3
Aggiungere questo codice alla regola "{} html" per creare un effetto di striscia orizzontale:
immagine di sfondo: lineare-gradient(transparent 50%, white 50%);
Questo codice crea due interruzioni di colore nella sfumatura, il primo trasparente e il bianco secondo. Ogni interruzione di colore prende il 50% dello spazio della sfumatura sullo schermo. Regolare la larghezza delle strisce uno rispetto a altro modificando i valori di percentuale.
4
Aggiungere un valore pari a zero di fronte alla prima fermata di colore e separarla dalle fermate con una virgola:
Immagine di sfondo: lineare-gradient(0, transparent 50%, black 50%);
Questa modifica renderà il vostro strisce verticale anziché orizzontale.
5
Duplicare la proprietà "background-image" e i suoi valori su una nuova riga. Farlo due volte, quindi vi ritroverete con tre linee dello stesso codice. Aggiungere il "-moz" prefisso per la sfumatura lineare in una delle linee di codice duplicate. Aggiungere il "-webkit" prefisso ad un altro duplicato linea:
immagine di sfondo: lineare-gradient(0, transparent 50%, white 50%);
immagine di sfondo: - moz-lineare-gradient(0, transparent 50%, white 50%);
immagine di sfondo: - webkit-lineare-gradient(0, transparent 50%, white 50%);
6
Vincolare il gradiente di una certa quantità di pixel impostando il "sfondo-dimensioni" nella riga successiva del codice CSS:
sfondo-dimensioni: 20px;
Modificare il numero di pixel in "sfondo-size" per modificare la dimensione della sfumatura. Perché la sfumatura sarà continuare a ripetere per la larghezza della pagina, ogni ripetizione della sfumatura diventa un set di righe sullo schermo.
Consigli & Avvertenze
- Alcuni browser più vecchi non supportano gradienti CSS3. Quando si desidera visualizzare uno sfondo a strisce per ogni browser, è possibile utilizzare commenti condizionali per includere un foglio di stile con una grafica ripetuta.