Ver Mensaje Individual
  #5 (permalink)  
Antiguo 18/06/2009, 16:19
kseso?
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Imagen fija sobre texto en un scrollbar.

Nada es imposible hasta que dices no puedo

Mira a ver si puedes usar esto como base:

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>sin título</title>
  4. <style type="text/css">
  5. * {margin:0; padding:0;position: relative;}
  6. html, body {
  7.   background-color: #cdcdcd;
  8. }
  9. #contenedor {
  10.   width:250px;
  11.   height:300px;
  12.   background-color:#9999CC;
  13.   margin: 0 auto;
  14.   overflow: auto;
  15. }
  16. .top {
  17.   background: #fff;
  18.   height: 75px;
  19.   width: 235px;
  20.   position: fixed;
  21.   top: 0;
  22.   opacity: 0.65;
  23. }
  24. .bottom {
  25.   background: #000;
  26.   height: 75px;
  27.   width: 235px;
  28.   position: fixed;
  29.   top:225px;
  30.   opacity: 0.65;
  31.   }
  32. </head>
  33. <div id="contenedor">
  34. <p>Lorem ipsum dolor sit amet consectetuer nonummy Nullam consectetuer Fusce In. Quis id nunc Pellentesque Vivamus Curabitur pharetra ante Aenean penatibus metus. Turpis lacus dui Sed Suspendisse a id Vestibulum sed.</p>
  35. <p>Wisi id orci elit id pretium eget lacinia Duis dapibus lorem. Ut sem convallis id massa tellus volutpat massa sapien quis iaculis. Semper volutpat habitasse at adipiscing penatibus ut Phasellus urna lacinia ac. Sagittis nulla.</p>
  36. <p>Lorem ipsum dolor sit amet consectetuer semper convallis wisi tortor sapien. Et et eget at hendrerit hendrerit habitasse Aliquam nibh Nunc egestas. Enim feugiat Phasellus Praesent penatibus cursus at pede Lorem quis adipiscing. Enim pulvinar a Vestibulum Sed Curabitur enim laoreet id nibh faucibus. Vitae montes sed Pellentesque libero magnis nec lorem arcu Curabitur non. Cursus Nullam ut Quisque ornare ut amet.</p>
  37. <p>Faucibus et lacus auctor enim ipsum congue Nunc Lorem Morbi sem. Nullam arcu rhoncus mus In metus orci risus lacinia at Integer. Aliquam mi hendrerit Curabitur eget In sagittis Phasellus tincidunt elit congue. Semper Vestibulum at laoreet Integer wisi vitae non fermentum Nunc gravida. Pretium Nulla quis Nulla urna tempor rutrum quis Maecenas risus morbi. Auctor tempor neque pretium iaculis In lacinia Suspendisse ipsum Quisque.</p>
  38. <p>Quis augue interdum dictumst id orci wisi orci Nam tincidunt In. Justo justo pellentesque adipiscing consequat consectetuer augue at augue neque lobortis. Nam at habitant nibh quis nulla consequat risus massa convallis odio. Cras purus ridiculus at Curabitur egestas pharetra elit purus elit orci. Porttitor sollicitudin nulla vestibulum Nullam ipsum Aenean vitae dolor magna Suspendisse. </p>
  39. <p>Nulla nibh laoreet malesuada tincidunt pellentesque id pede est magna libero. Aenean in ipsum Ut nisl ligula et a ut pharetra facilisis. Congue non elit volutpat Sed sollicitudin In eu pellentesque parturient dolor. Donec et est lacus tellus Vestibulum cursus hac lacinia ante Aenean. Dolor pretium cursus orci id consequat iaculis Vestibulum Ut Aenean vitae. Ipsum.</p>
  40. <p>Id Curabitur felis sed lobortis eu id sit urna tempor semper. Leo libero Phasellus hendrerit congue augue Phasellus et vel iaculis pellentesque. Scelerisque netus id.</p>
  41.  
  42. <div class="top"></div>
  43. <div class="bottom"></div>
  44.  </div>
  45. </body>
  46. </html>

Coloca como fondo a los divs .top y .bottom tus imágenes y eliminas la propiedad opacity.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++