Foros del Web » Creando para Internet » CSS »

opacity afecta el texto

Estas en el tema de opacity afecta el texto en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/02/2011, 15:23
Avatar de El_seba  
Fecha de Ingreso: enero-2010
Mensajes: 27
Antigüedad: 7 años, 11 meses
Puntos: 0
Pregunta opacity afecta el texto

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
  #2 (permalink)  
Antiguo 18/02/2011, 16:25
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: opacity afecta el texto

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
  #3 (permalink)  
Antiguo 20/02/2011, 11:08
 
Fecha de Ingreso: noviembre-2009
Mensajes: 64
Antigüedad: 8 años
Puntos: 1
Respuesta: opacity afecta el texto

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 { 
    
floatright;
    
width802px;
    
border1px solid #00671c;
    
displayblock;        
    
positionrelative;
    
opacity0.5;
    -
moz-opacity0.5;
    -
khtml-opacity0.5;
    
filteralpha(opacity=50);
    
background#000;
    
min-height850px;
}
#contenido{ 
    
floatright;
    
width802px;
    
text-alignjustify;
    
displayblock;        
    
positionabsolute;

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
  #4 (permalink)  
Antiguo 21/02/2011, 09:11
 
Fecha de Ingreso: noviembre-2009
Mensajes: 64
Antigüedad: 8 años
Puntos: 1
Respuesta: opacity afecta el texto

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
  #5 (permalink)  
Antiguo 21/02/2011, 09:40
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: opacity afecta el texto

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>Jugando con Css x Kseso?</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <style type="text/css">
  6. * {margin:0; padding:0; position: relative;}
  7. html, body {
  8.   height: 100%;
  9.   font-size: 16px;
  10.   font-family: monospace;
  11.   background: #f00 url("http://static.forosdelweb.com/fdwtheme/back-thead.png") repeat-x top;
  12.  
  13. }
  14. #contenedor {
  15.   width: 80%;
  16.   border: 1px solid #444;
  17.   margin: 0 auto;
  18.   background:
  19. }
  20. #fijo {
  21.   position: absolute;
  22.   left: 0;
  23.   right:0;
  24.   top:0;
  25.   bottom:0;
  26.   background: #fff;
  27.   opacity: .4;
  28. }
  29. p {padding: 10px;}
  30. </head>
  31.   <div id="contenedor">
  32.         <div id="fijo"></div>
  33.         <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>
  34. <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>
  35.   </div>
  36. </body>
  37. </html>
El ejemplo anterior es eso, un ejemplo.

Etiquetas: opacidad, opacity
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 08:49.