Variacion de la opacidad con CSS

Divs transparentes con CSS: Backgroung opacity

29 diciembre, 2014 1 comentario

Al trabajar con HTML, en muchas ocasiones nos enfrentamos al reto de crear una capa con un color de fondo transparente. En este tips & tricks analizamos cómo trabajar con la opacidad de una capa mediante CSS3.

Se creará una capa con un color de fondo transparente. La capa contendrá texto, el cual se desea que sea totalmente opaco. Se empleará:

Se ha testeado en los navegadores:

  • Mozilla 33
  • Google chrome 39
  • Internet Explorer 9

Propiedad CSS Opacity

Opacity es una propiedad de la hoja de estilos CSS3 soportada por las últimas versiones de los distintos navegadores con la que se puede determinar el grado de opacidad de un elemento. A medida que disminuye la opacidad, aumenta la transparencia.

La propiedad de transparencia se puede aplicar a bloques (un div por ejemplo) o a elementos individuales (imágenes, textos…).

La sintaxis es:

opacity:valor;

donde valor es un número decimal comprendido entre 0 (invisible) y 1 (sólido).

NOTA: La expresión transparente en este artículo no está relacionada con el valor “transparent” de las propiedades que admiten un color como valor (background-color, color), sino con los conceptos opaco, transparente y traslúcido: la posibilidad de un objeto para dejar pasar la luz (ver a través de él) o no y el grado en que lo hace.

Por defecto, todos los elementos tienen una opacidad igual a 1. Eso implica que si no modificamos esta propiedad, cualquier elemento de nuestra página web será completamente opaco.

En principio, variar el grado de transparencia de un elemento en CSS3 es algo tan simple como modificar el valor de la propiedad opacity. Pero en caso de que se aplique a bloques (a una capa, por ejemplo) se debe tener en cuenta que esta propiedad se hereda. Esto quiere decir que todos los elementos dentro del bloque, como por ejemplo texto en su interior, también se verán afectados por el cambio de opacidad.

La versión de los navegadores que soportan esta propiedad son:

  • Google Chrome 4.0+
  • Internet Explorer 9.0+
  • Mozilla Firefox 2.0+
  • Safari 3.1+
  • Ópera 9.0+

Para versiones de Internet Explorer anteriores a la 9, se puede añadir la sentencia:

filter:alpha(opacity=valor); /* IE < 9.0 */

Donde valor es un número entero comprendido entre 0 y 100.

Ejemplo de la propiedad opacity

Para ver el funcionamiento de esta propiedad, se propone crear una capa con un color de fondo rojo y opacidad del 60%. El color de fondo se podría expresar tanto en formato hexadecimal como RGB.

<html>
<head>
<title>Opacity</title>
<style>
body{
   background:url("./logo.jpg");
}
.opacity{
   background-color:rgb(255,0,0);
   opacity:0.6; /* Opacidad 60% */
   width:200px;
   height:70px;
}
</style>

</head>
<body>
   <div class="opacity">OPACITY</div>
</body>
</html>

Para asegurar la compatibilidad con Internet Explorer anterior a 9, añadimos la línea 4:

.opacity{
   background-color:rgb(255,0,0);
   opacity:0.6;
   filter:alpha(opacity=60); /* IE < 9.0 */
   width:200px;
   height:70px;
}

RESULTADO
Se observa que no sólo el color de fondo de la capa es transparente sino que el texto también lo es:

CSS opacity. Fondo y texto transparente

CSS opacity. Fondo y texto transparente

Cómo conseguir que el texto no sea transparente

Se puede proceder de varias maneras si se desea evitar, en el ejemplo anterior, que el texto contenido en la capa pierda opacidad.

La manera menos eficiente para ello pasaría por generar una capa con el texto y una segunda capa, en su interior, con el fondo transparente. El inconveniente es que el texto se debería repetir en sendas capas para que realmente dé la sensación de opacidad. El código sería el siguiente:

<html>
<head>
<title>Simular Opacity</title>
<style>
body{
   background:url("./logo.jpg");
}
.texto{
   width:200px;
   height:70px;
   color: #000;
   float:left;
   position:relative;
}
.opacity{
   background-color:rgb(255,0,0);
   opacity: 0.6;
   width:200px;
   height:70px;
   position:absolute;
   top:0px;
}
</style>

</head>
<body>
   <div class="texto">OPACITY
      <div class="opacity">OPACITY</div>
   </div>
</body>
</html>

Aunque esta solución es factible, existe una manera más elegante para obtener el mismo resultado, empleado rgba tal y como se explica a continuación.

CSS opacity. Fondo transparente

CSS opacity. Fondo transparente

CSS RGBA

Si el background (color de fondo) es un color plano, la propiedad opacity se evita declarando los colores en notación RGBA:

rgba(red, green, blue, alpha)

Donde el cuarto parámetro hace mención al canal alpha. Viene definido como un número decimal comprendido entre 0 y 1.

El canal alpha define la transparencia de un píxel. Actúa como una máscara que permite definir la opacidad de un color de forma virtual. A medida que se disminuye el valor del canal alpha, se consigue aumentar la transparencia de la capa.

A continuación, se crea una capa con un color de fondo rojo y un valor para el canal alpha del 60%.

<html>
<head>
<title>RGBA</title>
<style>
body{
   background:url("./logo.jpg");
}
.rgba{
   background-color:rgba(255,0,0,0.6); /* rgbA */
   width:200px;
   height:70px;
}
</style>

</head>
<body>
<div class="rgba">RGBA</div>
</body>
</html>

Se observa que de esta forma, se consigue una capa transparente y el color del texto opaco:

CSS rgbA

CSS rgbA

La versión de los navegadores que soportan la definición de colores mediante RGBA son:

  • Google Chrome (todas)
  • Internet Explorer 9.0+
  • Mozilla Firefox 3.0+
  • Safari (todas)
  • Ópera 10.0+

 

Si te ha parecido interesante este tips & tricks y quieres recibir información de nuestros futuros artículos, hazte seguidor en nuestro facebook.

Volver al blog

Comentario (1)

Edimer dijo:

excelente informacion, la ultima solución de verdad que es la mas óptima

Leave a Reply to Edimer Cancelar