CSS: Colori di sfondo e di primo piano


Il colore di sfondo non viene mai ereditato, mentre quello di primo piano si, sempre. Puoi specificare la proprieta' color usando un insieme di parole in linguaggio naturale o tramite la notazione RGB. Esempi:

h1 { color : red } /* questa e' una notazione il linguaggio naturale */
h1 { color : #f00 } /* questa e' una notazione RGB */
h1 { color : #ff0000 } /* questa e' una notazione RGB */
h1 { color : rgb(255, 0, 0) } /* questa e' una notazione RGB */
h1 { color : rgb(100%, 0%, 0%) } /* questa e' una notazione RGB */

I colori possibili sono: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. Comunque le notazioni qui sopra specificano la proprieta' del colore di primo piano; se vuoi specificare il colore di dello sfondo, devi usare la proprieta' background-color. Esempio:

h1 { background-color : red }

Ma puoi anche usare un' immagine come come sfondo, usando la proprieta' background-image. Esempio:

h1 { background-image : url(tua_immagine.gif) } nota: se la tua immagine si trova all' interno della stessa directory dove si trovano tutte le pagine, puoi anche srcivere cosi':

h1 { background-image : tua_immagine.gif }

Se specifichi un' immagine come sfondo, puoi anche specificare la sua posizione all' interno della finestra, tramite la proprieta' background-position. Puoi usare un valore percentuale, un valore numerico o queste parole chiave: top, center, bottom, left, center, right. Esempi:

body { background-image : image.gif; background-position : 0% 0% }
L' esempio sopra ha lo stesso significato di questo:
body { background-image : image.gif; background-position : top left }

body { background-image : image.gif; background-position : 50% 50% }
L' esempio sopra ha lo stesso significato di questo:
body { background-image : image.gif; background-position : center center }

body { background-image : image.gif; background-position : 50% 50% }
L' esempio sopra ha lo stesso significato di questo:
body { background-image : image.gif; background-position : center }

body { background-image : image.gif; background-position : 100% 100% }
L' esempio sopra ha lo stesso significato di questo:
body { background-image : image.gif; background-position : bottom right }

body { background-image : image.gif; background-position : 100% 100% }
L' esempio sopra ha lo stesso significato di questo:
body { background-image : image.gif; background-position : bottom }

Comunque puoi usare qualsiasi valore intermedio come ad esempio '27% 84%' o '33% 43%'.


      Home  Pag. prec.  Pag. succ.       Chi siamo?  Scrivici!

Copyright (c) 1998-2006 Wowarea