Si queremos tener un fondo semi transparente y un texto opaco encima, quizás lo primero que se nos ocurra sea crear un estilo que contenga filter:alpha(opacity=10); y -moz-opacity:0.1; y luego aplicárselo a un DIV o celda y colocar todo nuestro contenido ahí.
Bueno, lo anterior no sirve porque debido a que el texto se encuentra dentro del mismo bloque, también se hace transparente.
Lo que debemos hacer es crear dos bloques (DIV o celda) distintos: uno para el fondo semi transparente y otro para el texto (o contenido) que va encima. Y luego colocar uno encima del otro.
Esto se hace de la siguiente manera.
Hoja de estilos
CSS:
-
.dppal {
-
position: absolute;
-
}
-
-
.dfondo {
-
width: 200px; height: 200px;
-
background-color: #ff0000;
-
filter:alpha(opacity=20);
-
-moz-opacity:0.2;
-
opacity: 0.2;
-
padding:10px;
-
}
-
-
.dtexto {
-
width: 200px; height: 200px;
-
background-color: transparent;
-
position: absolute;
-
z-index: 2;
-
padding:10px;
-
}
HTML:
Referencia:
http://developer.mozilla.org/en/docs/Useful_CSS_tips:Color_and_Background
#1 by Mfi on 9 Enero 2008 - 7:21
He probado el código que funciona perfectamente, pero el bloqueador de contenidos del Internet Explorer bloquea el estilo, con lo que la página se verá mal a no ser que el usuario sea lo suficientemente hábil, o se tome la molestia de desbloquear el contenido de la web. Es decir, la mayor parte de los visitantes verán la página con el contenido opaco. ¿hay alguna solución?
#2 by Recursos Web on 9 Enero 2008 - 16:28
Si es algo que IE decidió bloquear por default, no hay nada que puedas hacer, pero la verdad dudo que así sea, me puedes pasar la liga de tu página para verla?
#3 by Angelo on 18 Agosto 2008 - 1:04
T.T necesito por favor como hacer unas tablas con fondo semi transparente, pero que el texto sea 100% opaco… hasta ahora solo logro hacer el fondo de la tabla transparente, pero el texto no queda opaco :/ por favor una ayuda urgente! evan_m7@hotmail.com
#4 by Carolina on 24 Junio 2010 - 8:08
it works! Te amo gracias!
#5 by mmf on 22 Octubre 2010 - 2:48
si, funciona perfectamente, pero en el caso que el texto pueda crecer de forma administrable, no puede “empujar” el fondo semitransparente.
en ese caso ¿alguna sugerencia?
gracias
#6 by Pablo Viale on 22 Octubre 2010 - 9:46
Cámbiale el width en los estilos dfondo y dtexto a 100% por ejemplo, de acuerdo a lo que necesites.
Y si no, utiliza el atributo “overflow:scroll”, aunque no estoy seguro de que eso sea lo que necesites.
#7 by beto on 10 Marzo 2011 - 2:26
Hey muchas gracias brother! esto sirve de muchísimo!
#8 by Pablo Viale on 10 Marzo 2011 - 9:02
De nada beto! Saludos.