Div con fondo transparente, pero no el texto

ci2000 · #1 (**permalink**) 05/09/2008, 18:37

Hola, encontré en la web la forma de dejar una Div con fondo transparente.

Me interesa que el fondo quede transparente, pero que el texto contenido en esta Div no quede transparente.

¿Hay alguna forma?

El código que encontré es este:

Código:

<html>
<head>
  <style>
    .cnt{
      width:450px;
      background-color:#DDAADD;
      margin:0px;
      padding:15px;
      font-weight:bold
    }
    .trans{
      background-color:#00BB00;
      color:#CC0000;
      position:absolute;
      text-align:center;
      top:50px;
      left:40px;
      padding:65px;
      font-size:25px;
      font-weight:bold;
      width:300px;
    }
  </style>
</head>
<body>
  <div class="trans" style="z-index:1;filter:alpha(opacity=60);float:left;-moz-opacity:.60;opacity:.60">
    <p>Esta es la capa transparente</p>
  </div>
  <div class="cnt">
    <p>El cielo está enladrillado. ¿Quién lo desenladrillará? El desenladrillador que lo desenladrille, buen desenladrillador será.</p>
    <p>El perro de San Roque no tiene rabo porque Ramón Rodríguez se lo ha cortado.</p>
    <p>Pablito clavó un clavito. ¿Qué clavito clavó Pablito?</p>
    <p>Tres tristes tigres tragaban trigo en tres tristes trastos sentados tras un trigal.</p>
    <p>Me han dicho un dicho que han dicho que he dicho yo. Ese dicho está mal dicho, pues si lo hubiera dicho yo, estaría mejor dicho que el dicho que han dicho que he dicho yo.</p>
    <p>Papá, pon pan para Pepín.</p>
  </div>
</body>
</html>

Saludos y gracias por las respuestas

ci2000 · #2 (**permalink**) 05/09/2008, 18:38

Perdón, no había visto que ya hay un post sobre lo mismo

Saludos

ASYNTETYCO · #3 (**permalink**) 07/09/2008, 11:10

Yo tambien una vez intente hacerlo, estas tratando de darle transparencia solo a la caja no¿? Yo tambien trate de hacerlo pero nunca pude, suerte

JRCANO · #4 (**permalink**) 31/03/2009, 15:58

hola... solo es que pongas background-color:Transparent; al div que quieras que sea transparente...

<html>
<head>
<style>
.cnt{
width:450px;
background-color:#DDAADD;
margin:0px;
padding:15px;
font-weight:bold
}
.trans{
background-color:Transparent;
color:#CC0000;
position:absolute;
text-align:center;
top:50px;
left:40px;
padding:65px;
font-size:25px;
font-weight:bold;
width:300px;
}
</style>
</head>
<body>
<div class="trans" style="z-index:1;filter:alpha(opacity=60);float:left;-moz-opacity:.60;opacity:.60">
<p>Esta es la capa transparente</p>
</div>
<div class="cnt">
<p>El cielo está enladrillado. ¿Quién lo desenladrillará? El desenladrillador que lo desenladrille, buen desenladrillador será.</p>
<p>El perro de San Roque no tiene rabo porque Ramón Rodríguez se lo ha cortado.</p>
<p>Pablito clavó un clavito. ¿Qué clavito clavó Pablito?</p>
<p>Tres tristes tigres tragaban trigo en tres tristes trastos sentados tras un trigal.</p>
<p>Me han dicho un dicho que han dicho que he dicho yo. Ese dicho está mal dicho, pues si lo hubiera dicho yo, estaría mejor dicho que el dicho que han dicho que he dicho yo.</p>
<p>Papá, pon pan para Pepín.</p>
</div>
</body>
</html>

caricatos · #5 (**permalink**) 31/03/2009, 23:11

Un fondo transparente se logra con transparent, las otras cosas se relacionan con opacidad que no es exactamente lo mismo...

#capa {background-color: transparent; }

Saludos

abel_23 · #6 (**permalink**) 02/09/2010, 15:39

Hola amigos el este post me parece interesante ya que estoy buscando algon parecido pero al momento de imprimir el div que es transparente me lo muestra encima del otro div y no me deja ver el contenido del div que se encuentra atras y otra comsulta como puedo hacer para que este div se muestre en toda las hojas que imprima, gracias por su ayuda.

kseso? · #7 (**permalink**) 02/09/2010, 16:04

¿cuando dice "imprimir" se refiere a ser mostrado en pantalla o a su salida por impresora?
Si es esto último, consulte las especificaciones sobre los medios paginados.

Y como sugerencia:
no reviva viejos temas. Es más efectivo que abra uno nuevo donde exponer su consulta, y, si lo cree conveniente, enlace el antiguo.