Unidad 10. CSS. Unidades. Color. Margen. Fondo. Borde (IV)



10.3. Atributo opacity

Puesto que en el punto anterior hemos hablado de la transparencia de un color vamos a hablar ahora del atributo opacity.

Este atributo produce también un efecto de transparencia, pero no está incluido en la descripción del color, sino que se aplica como un atributo más a elementos de HTML como imágenes, contenedores, fondos, etc.

Por ejemplo, si lo aplicamos a una etiqueta span, el efecto sobre el color de fondo es el mismo que la transparencia de RGBA/HSLA:

<span style="background-color:rgb(0,111,155); opacity: 0.5">

Por ejemplo, con opacity:1        y con opacity:0.5       

Y si lo aplicamos a una imagen como este pequeño círculo rojo :

<img style="opacity: 0.5" src="comunes/redball.gif">

Con valor opacity:1 lo vemos asi: y con valor opacity:0.5 así:

Además, hay una diferencia importante, si aplicamos el atributo opacity, la transparencia la heredarán todos los elementos hijos, cosa que no sucede con RGBA/HSLA.

Por ejemplo, en este primer caso la transparencia la hereda el texto que hay dentro del contenedor div para el que hemos fijado un valor de transparencia con opacity:0.6

<div style="background-color: rgb(0,111,155); opacity: 0.6; width: 30%">
<p>Con opacity:0.6</p></div>

Produce este resultado

Con opacity:0.6

Mientras, que en este segundo caso la transparencia no la hereda el texto que hay dentro del contenedor div para el que hemos fijado un valor de transparencia con RGBA 0.6.

<div style="background-color: rgba(0,111,155,0.6); width: 30%"><p>Con RGBA transparencia 0.6</p></div>

Produce este resultado

Con RGBA transparencia 0.6

Si fijamos un valor de transparencia con opacity:0, el contenedor no se verá, aunque sigue ahí ocupando un espacio.

<div style="background-color: rgb(0,111,155); opacity: 0; width: 30%"><p>Con opacity:0</p></div>

Produce este resultado

Con opacity:0

Este párrafo aparece después del hueco.

Si lo que queremos es hacer desaparecer un contenedor u otro objeto disponemos de la propiedad display:none el contenedor no se verá y, además, no ocupará espacio.

<div style="background-color: rgb(0,111,155); display: none; width: 30%">  <p>Con display:none</p></div>

Produce este resultado

Con display:none

Este párrafo aparece a continuación, sin hueco.

Para ocultar un contenedor u otro objeto sin alterar el diseño, es decir, dejando el hueco correspondiente, se suele utilizar la propiedad visibility:hidden, el contenedor no se verá pero ocupará su espacio.

 <div style="background-color: rgb(0,111,155); visibility:hidden; width: 30%">  <p>Con visibility:hidden</p></div>

Produce este resultado

Con visibility:hidden

Este párrafo aparece después del hueco.

10.4. Atributo visibility

Como acabamos de ver el atributo visibility permite cambiar la visibilidad de un elemento.

Puede tomar los siguientes valores:

- visible, el elemento se ve, es el valor por defecto.

- hidden, el elemento no se ve, queda oculto pero ocupando espacio. Es decir, quedará un hueco.

- collapse, sólo se puede usar para tablas, se oculta el elemento sin dejar hueco y sin afectar a los bordes de la tabla.

La diferencia principal entre ocultar un elemento con visibility o con opacity es que con esta última los elementos hijos la heredan, mientras que con visibility los hijos no la heredan. Ambas dejan el hueco. Otra diferencia es que con opacity el hueco responde a los eventos, por ejemplo, podemos detectar un click sobre él, mientras que con visibility no.

Si no queremos dejar hueco, debemos usar la propiedad display:none. Puesto que no hay hueco, tampoco detecta los eventos

 


Enero-2019 (V 2.0)
Pág. 10.4
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.