Opacidad CSS

  • Por
  • CSS
La opacidad en CSS sirve para definir lo opaco o transparente de un elemento en una página web. Taller de transparencia CSS.
En este artículo vamos a entrar en detalles sobre la opacidad en CSS. Veremos cómo alterar la transparencia de los elementos de la página a través de atributos CSS.

Aunque parezca una contradicción, la opacidad sirve para definir la transparencia de los elementos de la página. Esto es porque todos los elementos de una página son 100% opacos por defecto. Es decir, no se puede ver a través de ellos y por tanto al sobreponerse tapan totalmente lo que haya debajo. Así pues, a través de la opacidad podremos especificar cuanto de opaco será un elemento, o lo que es lo mismo, cuan transparente sea.

La opacidad se trabaja de dos maneras distintas en los navegadores más comunes. Por un lado tenemos a Internet Explorer, y por otro lado a todos los demás navegadores, es decir, Firefox, Opera o Chrome. Por ello, para especificar la opacidad o transparencia tendremos que hacerlo con dos atributos distintos. En DesarrolloWeb.com ya habíamos tratado este tema con anterioridad, pero ahora vamos a ofrecer explicaciones más completas.

Opacidad en Internet Explorer

En Explorer tenemos que indicar el grado de opacidad como un filtro de CSS. Dichos filtros se pueden aplicar con el atributo filter de hojas de estilos. Existen varios filtros disponibles para hacer distintos efectos sobre elementos de la página, en concreto el filtro opacity es el que nos interesa para definir transparencias. Se especifica de la siguiente manera:

.claseopacidad{
   filter:alpha(opacity=25);
}


Con esta declaración de estilos conseguiríamos que los elementos de la clase claseopacidad tuvieran un 25% de opaco, o lo que es lo mismo, un 75% de transparente.

Ahora bien, en Explorer no sé por qué, podemos encontrar un problema al utilizar el filtro opacity. Simplemente en algunos casos no funcionará y no veremos la transparencia que hayamos declarado. Esto se soluciona aplicando algún estilo adicional, aparte del propio filtro CSS. Por ejemplo, ponerle un ancho a la capa bastaría, o también colocarle un float:letf. Es importante saber esto, puesto que es el típico bug que si no lo sabes puedes acabar con un dolor de cabeza antes de dar con él.

Quedaría por ejemplo así:

.claseopacidad {
   filter:alpha(opacity=25);
   width: 120px;
}


Opacidad en Firefox, Opera, Chrome...

En estos navegadores se define la transparencia de una manera más simple. Lo haremos a través del atributo opacity, de esta manera:

. claseopacidad {opacity: .5}

Con esto conseguiremos que la clase sea 50% transparente, o 50% opaca, como prefiramos decir.
Nota: Está bien comentar que en versiones antiguas de Firefox, y productos derivados de Mozilla, este atributo no funcionaba. Hace años que ya está integrado en el navegador y funciona sin problemas, pero durante un tiempo había que utilizar otro atributo propio de Mozilla.

-moz-opacity: .25

Con esto indicamos una transparencia del 75%. Este atributo hoy no hace falta utilizarlo, pero si lo ponemos no es mala idea para aumentar la compatibilidad de la página con versiones anteriores del navegador.

Transparencia para todos los navegadores

Finalizamos este artículo de desarrollo web .com, poniendo todos los conocimientos adquiridos a la vez. Para declarar un estilo de transparencia que sirva para todos los navegadores simplemente tenemos que poner las distintas declaraciones de estilos todas juntas. Cada browser interpretará la que conoce.

.transparencia {
   opacity: .25;
   -moz-opacity: .25;
   filter:alpha(opacity=25);
   float: left;
}


Podemos ver un ejemplo sobre cómo quedaría la opacidad declarada en una página aparte.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Sergio TOCA

04/10/2008
Muchas gracias. No conocía la solución del problema con Explorer. Los resultados se pueden ver en www.constructmanager.com

tudigital

29/11/2008
muy bien esplicado mas sencillo de hay no se puede

Nico

01/5/2009
Compatibilidad
Esta muy buena la nota. Quise validar una pagina con este estilo en el css validator de la W3C pero me muestra error por los atributos opacity y alpha.
Que lastima pero si alguien sabe como solucionarlo que avise. Saludos.

Ruben

28/9/2009
Máximo de la opacidad
Cual es el máximo de opacidad, quiero decir, "alpha(opacity=100)" no funciona tampoco ".10", en cambio "alpha(opacity=90)" y/o ".9" Sí funciona.

jc

19/1/2010
validacion
esta clase no me la acepta la validacion w3c en css asi que poco me sirve, pero funciona...saludos

diego

28/7/2010
una consulta
Muy bien explicado, ahora te hago una consulta, necesito usar una imagen de fondo, una capa semitransparente negra y sobre eso texto blanco bien legible... lo intente hacer con este ejemplo y no puedo separar el texto del efecto de fondo, uso iframe, divs y sigue igual... alguna sugerencia?

Jorge Suarez

24/11/2010
bien bien
aqui siempre se encuentra una solucion para todo. Gracias

Spiderdraw

08/4/2011
Muy buena explicación
Excelente explicación, fácil de entender!!!
Gracias

Fabricio_mora

11/12/2012
Necesito ayuda soy un super novato en este foro poco a poco aprendere
hola amigos estoy creando un diseño web y me intersaria saber como logro que mi etiqueta del medio sea opaca¿? osae traslucida transparente pues y se me ve la imagen que tengo detras del div ese por ayudenme? aqui esta el codigo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ford</title>
<link href="file:///C|/AppServ/Documents and Settings/made/Mis documentos/la web/encabezdo.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Estilo9 {font-size: 12px; font-weight: bold;}
body {
background-color: #FFF7C0;
background-image: url(Imagenes/2010-Ford-F150-SVT-Raptor-Price.jpg);
. claseopacidad {opacity: .5}


-->
</style>
</head>
<body>
<table width="1000" height="81" border="1" bordercolor="#00CC66" bgcolor="#FFF7C0" align="center">
<tr>
<td height="75" bordercolor="#00CC66" background="#FFF7C0" bgcolor="#FFF7C0"><div align="center"><img src="Imagenes/logo.png" width="800" height="56" alt="MENBRETE" />
<img src="Imagenes/LOGO 2.png" width="181" height="56" alt="LOGO 2" /></div></td>
</tr>
</table>
<p>
<head>

<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="generator" content="Wufoo">
<meta name="robots" content="index, follow">
// estos son los css que he cargado para probar pero el de traslucido nada es importane aviasrles que los descarge de wuffo lo scrip y las css son de esa pagina
<!-- CSS -->
<link href="css/structure.css" rel="stylesheet">
<link href="css/form.css" rel="stylesheet">
<link href="css/menu marcas.css" rel="stylesheet">
<link href="css/opacacidad.css" rel="stylesheet">

<!-- JavaScript -->
<script src="scripts/wufoo.js"></script>
<div id="container" class="ltr" >

<h1 id="logo">
<a href="http://Tucarro.com.ve" title="Busca Otros Vehículos por la Red"></a></h1>

<form id="ford" name="ford" class="wufoo page" autocomplete="off" enctype="multipart/form-data" method="post" novalidate
action="">
<header id="header" class="info">
<h2> Ford <span> | </span></h2>

</header>
<div class="contCenter" id="menuhoriz" >
<div class="contLeft" id="menuhoriz" >
<div class="box boxN boxleft" id="menuhoriz" >
<ul>
<table width="300" border="0" cellpadding="5" align="center">
<tr>
<td width="201"><div class="itemPicture"><h2 align="center"><strong><img src="Imagenes/ford.jpg" width="70" height="50" href="http://www.tucarro.com.ve/ford/" title="Ford"></strong></h2>
<a href="ford1.html">
<img src="file:///C|/AppServ/www/Las Verdaderas pantallas/Galeria/Imagenes/20R ABE/ranger.jpg" width="133" height="100" /> </a>
<div style="padding-top:8px;" align="left">
<ul>
<h4>
<strong>Ford-Ranger</strong>
</h4>
<h4>
<strong>2003 | Sincrónica 4x4</strong>

<div style="margin-top:5px; padding-bottom:5px; font:11px Arial" align="left">Rustico</div>
<div style="margin-top:5px; padding-bottom:5px; font:11px Arial" align="left">Disponible</div>
</h4>
<strong>placa: 20R-ABE<span></span></strong></td>
<td width="201"><div class="itemPicture"><h2 align="center"><strong><img src="Imagenes/ford.jpg" width="70" height="50" href="http://www.tucarro.com.ve/ford/" title="Ford"></strong></h2>
<a href="ford2.html">
<img src="Galeria/Imagenes/64T ABD/64T ABD (1).JPG" width="133" height="100" /> </a>
</div>
<div style="padding-top:8px;" align="left">
<ul>
<h4>
<strong>Ford-F-150</strong>
</h4>
<h4>
<strong>2002 | Sincrónica 4x4</strong>

<div style="margin-top:5px; padding-bottom:5px; font:11px Arial" align="left">Rustico</div>
<div style="margin-top:5px; padding-bottom:5px; font:11px Arial" align="left">Disponible</div>
</h4>
<strong>placa: 64T-ABD<span></span></strong></td>
</tr>
</table>

</ul>
</div>
</div>
</div>
</form>
</div><!--container-->
</body>
</html></p>
<table width="1000" height="81" bordercolor="#00CC66" bgcolor="#FFF7C0" border="1" align="center">
<tr>
<td width="1007">&nbsp;</td>
</tr>
</table>
</body>
</html>

Yola

14/4/2017
Problemas
Por favor quien me ayude, estoy creando una página web,bueno hace 3 meses no sabía nada de esto y es algo nuevo. Tengo una caja que contiene una imagen y le doy estos pasos y se me pone opaco todo el problema es que tiene un texto y también se pone opaco el texto y todo. Alguien que me pueda ayudar?