Attrubuti di Background

« Older Newer »

Dio Sëifer

Posted on 13/5/2012, 21:26

Senior Member

Group: HxH-Fansub (Founder)

Posts: 15,787

Status: Offline

Background-color permette di avere un colore in tinta unita come sfondo del documento, che può essere una struttura o un testo.
Esempio: TopScript Forum

HTML

<font style="background-color: white;"> NSS </font>

E' anche possibile usare uno sfondo trasparente
Esempio: TopScript Forum

HTML

<font style="background-color: transparent;"> NSS </font>

Color stabilisce il colore del testo.
Esempio: TopScript Forum

HTML

<font style="background-color: green; color: red; "> NSS </font>

Background-image permette di applicare un immagine come sfondo inserendo il relativo link.

HTML

<div style="background-image: url('Link_Immagine');"> NSS</div>

Background-repeat permette di applicare o meno la ripetizione dello sfondo.

HTML

<div style="background-image: url('Link_Immagine'); background-repeat: repeat;> NSS</div>

(ripeterà lo sfondo)

HTML

<div style="background-image: url('Link_Immagine'); background-repeat: no-repeat;>NSS</div>

(non ripeterà lo sfondo)

HTML

<div style="background-image: url('Link_Immagine'); background-repeat: repeat-x;>NSS</div>

(ripeterà lo sfondo solo su un asse orizzontale)

HTML

<div style="background-image: url('Link_Immagine'); background-repeat: repeat-y;>NSS</div>

(ripeterà lo sfondo solo su un asse verticale)

Background-position definisce il punto da cui iniziare a posizionare l'immagine di sfondo e funziona se abbinato con background-image e background-repeat.
Per il posizionamento orizzontale si abbineranno left, center, right, e per il posizionamento verticale top, center, bottom.
Esempio:

HTML

<div style="background-image: url('Link_Immagine'); background-repeat: no-repeat; background-position: right;"></div>

E' anche possibile esprimere valori percentuali, dove 0% 0% indica l'angolo in alto a sinistra e 100% 100% indica l'angolo in basso a destra. Per una maggiore precisione è possibile anche stabilire i valori in pixel dal punto default, per esempio con 50 50, che indicherà 50px sull'asse x e 50 px sull'asse y.
Esempio:

HTML

<div style="background-image: url('Link_Immagine'); background-repeat: no-repeat; background-position: 50 50;"></div>

La coordinata top posizionerà l'elemento in cima alla pagina, ed abbinata per esempio a top left posizionerà l'elemento in cima a sinistra della pagina.
Esempio:

HTML

<div style="background-image: url('Link_Immagine'); background-repeat: no-repeat; background-position: top left;"></div>

La coordinata bottom posizionerà l'elemento in fondo alla pagina, e potrà anch'essa essere abbinata a left, center e right.
Esempio:

HTML

<div style="background-image: url('Link_Immagine'); background-repeat: no-repeat; background-position: bottom center;"></div>

Background-attachment definisce se l'immagine usata come sfondo deve scorrere sullo schermo insieme al testo (scroll) oppure restare fissa sullo sfondo (fixed) nel momento in cui si scorre la pagina verticalmente.
Esempio:

HTML

<div style="background-image: url('Link_Immagine'); background-repeat: no-repeat; background-position: center; background-attachment: scroll;"></div>

(in questo caso scorrerà con la pagina)
Esempio:

HTML

<div style="background-image: url('Link_Immagine'); background-repeat: no-repeat; background-position: center; background-attachment: fixed;"></div>

(in questo caso non scorrerà con la pagina ma resterà fissa sullo sfondo)

Credits
Nss

Web

0 replies since 13/5/2012, 21:26 7 views