Tema: opacity afecta el texto
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 21/02/2011, 09:40
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
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. <head>
  4. <title>Jugando con Css x Kseso?</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  6. <style type="text/css">
  7. * {margin:0; padding:0; position: relative;}
  8. html, body {
  9.   height: 100%;
  10.   font-size: 16px;
  11.   font-family: monospace;
  12.   background: #f00 url("http://static.forosdelweb.com/fdwtheme/back-thead.png") repeat-x top;
  13.   
  14. }
  15. #contenedor {
  16.   width: 80%;
  17.   border: 1px solid #444;
  18.   margin: 0 auto;
  19.   background: 
  20. }
  21. #fijo {
  22.   position: absolute;
  23.   left: 0;
  24.   right:0;
  25.   top:0;
  26.   bottom:0;
  27.   background: #fff;
  28.   opacity: .4;
  29. }
  30. p {padding: 10px;}
  31. </style>
  32. </head>
  33. <body>
  34.   <div id="contenedor">
  35.         <div id="fijo"></div>
  36.         <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>
  37. <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>
  38.   </div>
  39. </body>
  40. </html>
El ejemplo anterior es eso, un ejemplo.