opacity afecta el texto

El_seba · #1 (**permalink**) 18/02/2011, 15:23

Hola

Es la primera vez que utilizaba opacity en CSS y la verdad no lo tengo muy claro.
Hice un div con un color de fondo blanco, y le puse una opacidad de 50%.

El problema es que la opacidad que le aplico al div perjudica la opacidad del texto y las imágenes.
¿Cómo puedo evitar eso? Es que el texto está muy poco visible y queda mal...

Ya he probado meter dentro de un div a ver si algo cambiaba, pero no.

Desde ya, muchas gracias

alexk · #2 (**permalink**) 18/02/2011, 16:25

pues si puedes usar este fix
http://araudi.net/ejemplos/transparencia.html
o bien colores RGB o mejor aun un PNG transparente para conseguir el efecto deseado

Tooj · #3 (**permalink**) 20/02/2011, 11:08

Hola. yo también tenía el mismo problema que el-seba y con la ayuda de alesk pude arreglarlo, sin embargo ha surgido otro problema.

tengo este div:

Código PHP:

  #art { 

    float: right;

    width: 802px;

    border: 1px solid #00671c;

    display: block;        

    position: relative;

    opacity: 0.5;

    -moz-opacity: 0.5;

    -khtml-opacity: 0.5;

    filter: alpha(opacity=50);

    background: #000;

    min-height: 850px;

}

#contenido{ 

    float: right;

    width: 802px;

    text-align: justify;

    display: block;        

    position: absolute;

}

y he puesto asi los divs, siguiendo el ejemplo dado en araudi.net

Código PHP:

  <div id="page">

 
<div id="art">

 
</div>

 
<div id="contenido">

 

blablababla

 
</div>

 
<div id="footer">

 
</div>

 
</div> <!--page-->

el problema está en que el footer se ubica siempre en el min-height de 850px que esta dado en div-art. si el contenido del articulo es poco esta bien, pero si el contenido del articulo es mucho, el footer, queda atrás del contenido.

y no se como arreglarlo.

alguien puede orientarme. tal vez la cuestion está en el footer, pero no he conseguido arreglar este problemita.

gracias

saludos

Tooj · #4 (**permalink**) 21/02/2011, 09:11

He leído varios posts en foros del web sobre el mismo tema y es posible llegar a la conclusión de que para contenidos dinámicos no sirve poner un div con opacity y otro div, fuera, con position absolute.

para contenidos dinámicos, lo mejor, parece ser, es el de la imagen opaca en png.

gracias.

saludos

kseso? · #5 (**permalink**) 21/02/2011, 09:40

Si no se conocen a priori las medidas de la caja contenedora, sí sabemos seguro de la existencia de cuatro puntos, con independencia de los valores que tengan en cada ventana del navegador de cada usuario.
Son las cuatro esquinas.
Así que una teniendo esas referencias, el resto es fácil:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Jugando con Css x Kseso?</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
* {margin:0; padding:0; position: relative;}
html, body {
  height: 100%;
  font-size: 16px;
  font-family: monospace;
  background: #f00 url("http://static.forosdelweb.com/fdwtheme/back-thead.png") repeat-x top;
  
}
#contenedor {
  width: 80%;
  border: 1px solid #444;
  margin: 0 auto;
  background: 
}
#fijo {
  position: absolute;
  left: 0;
  right:0;
  top:0;
  bottom:0;
  background: #fff;
  opacity: .4;
}
p {padding: 10px;}
</style>
</head>
<body>
  <div id="contenedor">
        <div id="fijo"></div>
        <p>Lorem ipsum dolor sit amet consectetuer feugiat pellentesque id Pellentesque justo. Suspendisse ut mauris Sed In Morbi et orci fames est gravida. Nam congue platea malesuada congue Pellentesque orci felis dolor Vivamus Nulla. Montes vitae fames morbi tincidunt Aenean ligula Nam metus pellentesque nibh. Sed in malesuada Sed Aenean ridiculus Nunc urna ac.</p>
<p>Quis sed hendrerit dolor tincidunt Vivamus Aliquam Sed vel Vestibulum eros. Morbi Ut accumsan faucibus Integer orci amet elit diam fames elit. Habitant Curabitur lacus at eros felis sem quis enim et Nam. Purus Suspendisse mollis interdum wisi eget amet consectetuer neque sed cursus. Sed felis eget velit eget vitae scelerisque volutpat Lorem laoreet malesuada. Quam quis.</p>
  </div>
</body>
</html>

El ejemplo anterior es eso, un ejemplo.