19. Visibilitat, capes i transparència

 

Índex

Visibilitat

Amb l'atribut visibility podem fer que un element sigui visible o invisible:

El valor per defecte és visible.

Una alternativa és l'ús de l'atribut display:

El primer amaga l'element, el segon l'intercala en línia i el tercer li atribueix un bloc sencer.

Aquests dos recursos no són del tot equivalents: el primer simplement amaga l'element hidden, però li reserva el mateix espai que si fos visible; el segon, en canvi, estalvia l'espai, i en passar de none a block o inline habilita l'espai necessari i fa el desplaçament dels altres elements.

Exemple

Com a norma general, fer invisible un element comporta que en determinades circumstàncies esdevingui visible, cosa a què ens referirem oportunament.

 

Opacitat

Amb l'atribut opacity podem fer que un element sigui parcialment transparent:

on n és un nombre comprès entre 0 (totalment transparent) i 1 (totalment opac).

La transparència permet veure el que hi ha a sota; si és un color de fons, modificarà els colors propis de l'element parcialment transparent.

Exemple

 

Nivell z

En principi, l'existència de capes comporta que la posterior en la codificació del document tapi l'anterior. Hi ha, però, un recurs per a modificar aquest comportament: l'atribut z-index. Aquest consisteix en un nombre que controla l'ordre de superposició de les capes: un valor més alt de z representa una capa superior; un valor més baix .

Exemple