14 Colori e sfondi

Sommario

Le proprietà CSS consentono agli autori di specificare il colore di primo piano e lo sfondo di un elemento. Gli sfondi possono essere colori o immagini. Le proprietà dello sfondo consentono agli autori di posizionare un'immagine di sfondo, di ripeterla, e di dichiarare se deve essere fissa rispetto alla finestra di visualizzazione o scrollata insieme con il documento.

Si veda la sezione sulle unità di colore per la sintassi dei valori di colore validi.

14.1 Il colore di primo piano: la proprietà 'color'

'color'
Valore:  <color> | inherit
Iniziale:  dipende dal programma utente
Si applica a:  tutti gli elementi
Ereditata:  si
Percentuali:  N/A
Media:  visuale

Questa proprietà descrive il colore di primo piano del contenuto testuale di un elemento. Ci sono diversi modi di specificare il rosso:

Esempi(o):

EM { color: red }              /* predefined color name */
EM { color: rgb(255,0,0) }     /* RGB range 0-255   */

14.2 Lo sfondo

Gli autori possono specificare lo sfondo di un elemento (ossia la sua superficie di resa) sia con un colore che con un'immagine. In termini di modello per riquadrati, "sfondo" si riferisce allo sfondo delle areee di contenuto e di cuscinetto. I colori e gli stili del bordo sono impostati con le proprietà del bordo. I margini sono sempre trasparenti, così che lo sfondo del riquadrato genitore è sempre visibile attraverso di essi .

Le proprietà dello sfondo non sono ereditate, ma lo sfondo del riquadrato genitore sarà sempre visibile per impostazione predefinita a causa del valore iniziale di 'transparent' per 'background-color'.

Lo sfondo del riquadrato generato dall'elemento radice copre l'intero canovaccio.

Per i documenti HTML, tuttavia, raccomandiamo che gli autori specifichino lo sfondo per l'elemento BODY piuttosto che per HTML. I programmi utente dovrebbero osservare le seguenti regole di precedenza per riempire lo sfondo: se il valore della proprietà 'background' per l'elemento HTML è diverso da 'transparent', allora lo si usi, altrimenti si usi il valore della proprietà 'background' per l'elemento BODY. Se il valore risultante è 'transparent', la resa non è definita.

Secondo queste regole, il canovaccio che si trova sotto il seguente documento HTML avrà uno sfondo "marmo":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Setting the canvas background</TITLE>
    <STYLE type="text/css">
       BODY { background: url("http://style.com/marble.png") }
    </STYLE>
  </HEAD>
  <BODY>
    <P>My background is marble.
  </BODY>
</HTML>

14.2.1 Proprietà dello sfondo: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', e 'background'

'background-color'
Valore:  <color> | transparent | inherit
Iniziale:  transparent
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  N/A
Media:  visuale

Questa proprietà imposta il colore di sfondo di un elemento, come valore <color> o come parola chiave 'transparent', per far vedere i colori sottostanti.

Esempi(o):

H1 { background-color: #F00 }
'background-image'
Valore:  <uri> | none | inherit
Iniziale:  none
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  N/A
Media:  visuale

Questa proprietà imposta l'immagine di sfondo di un elemento. Quando si imposta un'immagine di sfondo, gli autori dovrebbero specificare anche un colore di sfondo che sarà usato se l'immagine non è disponibile. Se l'immagine è disponibile, è resa sulla parte superiore del colore di sfondo. (Così il colore è visibile nelle parti trasparenti dell'immagine).

I valori per questa proprietà sono <uri>, per specificare l'immagine, o 'none', se l'immagine non è usata.

Esempi(o):

BODY { background-image: url("marble.gif") }
P { background-image: none }
'background-repeat'
Valore:  repeat | repeat-x | repeat-y | no-repeat | inherit
Iniziale:  repeat
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  N/A
Media:  visuale

Se viene specificata un'immagine di sfondo, questa proprietà specifica se l'immagine è ripetuta (a copertura), e come. La copertura ricopre le aree del contenuto e del cuscinetto di un riquadrato. I valori hanno i seguenti significati:

repeat
L'immagine è ripetuta orizzontalmente e verticalmente.
repeat-x
L'immagine è ripetuta solo orizzontalmente..
repeat-y
L'immagine è ripetuta solo verticalmente.
no-repeat
L'immagine non è ripetuta: viene riprodotta solo una copia dell'immagine.

Esempi(o):

BODY { 
  background: white url("pendant.gif");
  background-repeat: repeat-y;
  background-position: center;
}

Un'immagine di sfondo centrata,
le cui copie si ripetono sopra e sotto le aree di cuscinetto e di contenuto.   [D]

Una copia dell'immagine di sfondo è centrata, e altre copie sono posizionate sopra e sotto di essa per creare una banda verticale dietro l'elemento.

'background-attachment'
Valore:  scroll | fixed | inherit
Iniziale:  scroll
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  N/A
Media:  visuale

Se viene specificata un'immagine di sfondo, questa proprietà specifica se essa è fissa rispetto alla finestra di visualizzazione ('fixed') o se scrolla insieme con il documento ('scroll').

Anche se l'immagine è fissa, essa rimane visibile solo visibile quando si trova nell'area di sfondo o di cuscinetto dell'elemento. Così, a meno che l'immagine non sia ripetuta ('background-repeat: repeat'), può essere invisibile.

Esempi(o):

Questo esempio crea una banda verticale infinita che rimane "incollata" alla finestra di visualizzazione quando l'elemento è scrollato.

BODY { 
  background: red url("pendant.gif");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

I programmi utente possono trattare 'fixed' come 'scroll'. Tuttavia, si raccomanda che interpretino 'fixed' correttamente, almeno per gli elementi HTML e BODY, poichè l'autore non ha modo di fornire un'immagine solo per quei browser [browser, navigatori] che supportano 'fixed'. Si veda la sezione sulla conformità per i dettagli.

'background-position'
Valore:  [ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
Iniziale:  0% 0%
Si applica a:  elementi a livello di blocco ed elementi rimpiazzati
Ereditata:  no
Percentuali:  in riferimento alle dimensioni del riquadrato stesso
Media:  visuale

Se è stata specificata un'immagine di sfondo, questa proprietà specifica la sua posizione iniziale. I valori hanno i seguenti significati:

<percentage> <percentage>
Con una coppia di valori di '0% 0%', l'angolo superiore sinistro dell'immagine è allineato con l'angolo superiore sinistro del limite del cuscinetto del riquadrato. Una coppia di valori di '100% 100%' posiziona l'angolo inferiore destro dell'immagine nell'angolo inferiore destro dell'area di cuscinetto. Con una coppia di valori di '14% 84%', il punto 14% (sull'asse orizzontale) e 84% (sull'asse verticale) deve essere posizionato alle medesime coordinate sull'area di cuscinetto.
<length> <length>
Con una coppia di valori di '2cm 2cm', l'angolo superiore sinistro dell'immagine è posizionato 2cm alla destra e 2cm sotto l'angolo superiore sinistro dell'area di cuscinetto.
top left e left top
Lo stesso che '0% 0%'.
top, top center, e center top
Lo stesso che '50% 0%'.
right top e top right
Lo stesso che '100% 0%'.
left, left center, e center left
Lo stesso che '0% 50%'.
center e center center
Lo stesso che '50% 50%'.
right, right center, e center right
Lo stesso che '100% 50%'.
bottom left e left bottom
Lo stesso che '0% 100%'.
bottom, bottom center, e center bottom
Lo stesso che '50% 100%'.
bottom right e right bottom
Lo stesso che '100% 100%'.

Se viene dato solo un valore di percentuale o di lunghezza, questo imposta solo la posizione orizzontale, e la posizione verticale sarà 50%. Se vengono dati due valori, viene prima la posizione orizzontale. Combinazioni di valori di lunghezza e percentuali sono consentiti (per esempio '50% 2cm'). Sono consentiti anche posizioni negative. Le parole chiave non possono essere combinate con valori di percentuale o di lunghezza (tutte le possibili combinazioni sono date sopra).

Esempi(o):

BODY { background: url("banner.jpeg") right top }    /* 100%   0% */
BODY { background: url("banner.jpeg") top center }   /*  50%   0% */
BODY { background: url("banner.jpeg") center }       /*  50%  50% */
BODY { background: url("banner.jpeg") bottom }       /*  50% 100% */

Se l'immagine di sfondo è fissa all'interno della finestra di visualizzazione (si veda la proprietà 'background-attachment'), l'immagine è posizionata in relazione alla finestra di visualizzazione invece che all'area di cuscinetto dell'elemento. Per esempio,

Esempi(o):

BODY { 
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
} 

Nell'esempio di sopra, la (singola) immagine è posizionata nell'angolo in basso a destra della finestra di visualizzazione.

'background'
Valore:  [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit
Iniziale:  non definito per le proprietà stenografiche
Si applica a:  tutti gli elementi
Ereditata:  no
Percentuali:  consentite in 'background-position'
Media:  visuale

La proprietà 'background' è una proprietà stenografica [shorthand, o "abbreviata"] per impostare le singole proprietà dello sfondo (ossia 'background-color', 'background-image', 'background-repeat', 'background-attachment' e 'background-position') nella stessa posizione nel foglio di stile.

La proprietà 'background' imposta prima tutte le proprietà individuali dello sfondo sui loro valori iniziali, poi assegna esplicitamente i valori dati nella dichiarazione.

Esempi(o):

Nella prima regola del seguente esempio, è stato dato solo un valore per 'background-color' e le altre proprietà individuali sono impostate sul loro valore iniziale. Nella seconda regola, tutte le proprietà individuali sono state specificate.

BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }

14.3 Correzione di gamma

Per informazioni sui problemi di gamma, si prega di consultare il Gamma Tutorial nelle specifiche PNG ([PNG10]).

Nel calcolo della correzione di gamma, i programmi utente che visualizzano su CRT possono assumere un CRT ideale ed ignorare gli effetti su gamma apparente causati dal dithering. Ciò significa che la gestione minima che essi devono attuare su piattaforme correnti è:

PC con MS-Windows
nessuna
Unix con X11
nessuna
Mac con QuickDraw
applicare la gamma 1.45 [ICC32] (le applicazioni ColorSync-savvy possono semplicemente far passare il profilo sRGB ICC a ColorSync per eseguire la corretta correzione dei colori)
SGI con X
applicare il valore di gamma preso da /etc/config/system.glGammaVal (il valore predefinito è 1.70; le applicazioni che girano su Irix 6.2 o superiori possono semplicemente far passare il profilo sRGB ICC alla gestione colori di sistema)
NeXT con NeXTStep
applicare la gamma 2.22

"Applicare la gamma" significa che ciascuno dei tre R, G e B deve essere convertito in R'=Rgamma, G'=Ggamma, B'=Bgamma, prima di essere passato al sistema operativo.

Ciò si può fare rapidamente sviluppando una tabella di ricerca [lookup] a 256 elementi una sola volta per ogni invocazione [invocation. "invocare" è un termine comunemente usato in programmazione] del browser, così:

for i := 0 to 255 do
  raw := i / 255.0;
  corr := pow (raw, gamma);
  table[i] := trunc (0.5 + corr * 255.0)
end

che poi evita di aver bisogno di usare funzioni matematiche trascendenti [transcendental, termine matematico] per attributo di colore, o quanto meno per pixel.