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
.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;
}<div class="dppal">
<div class="dtexto">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pharetra augue vel tellus. Nulla blandit urna sit amet metus.
</div>
<div class="dfondo">
</div>
</div>
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?
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?
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
it works! Te amo gracias!
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
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.
Hey muchas gracias brother! esto sirve de muchísimo!
De nada beto! Saludos.