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>
Publicada en Web

8 comentarios sobre “Texto opaco sobre fondo semi transparente con CSS

  1. 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. 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. 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

  4. mmf :

    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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


cuatro × = 36