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
Enero 9th, 2008 at 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?
Enero 9th, 2008 at 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?
Agosto 18th, 2008 at 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