Ver Mensaje Individual
  #6 (permalink)  
Antiguo 26/08/2011, 00:05
Avatar de cristian_cena
cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 5 meses
Puntos: 269
Respuesta: duda sobre opacidad

claro, bueno, por eso te decía que tal vez no era necesario redimensionar el fondo.
Tomemos por caso este código:
Código HTML:
Ver original
  1. <div id="wrap"> <!-- contenedor -->
  2. <div id="contenido"><!-- texto, formulario y contenido en gral --></div>
  3. <div id="bg"><!-- fondo --></div>
  4. </div>
Código CSS:
Ver original
  1. #wrap{
  2. position:relative;
  3. }
  4. #contenido{
  5. width: ... ; /*fijate que en ningun momento declaramos un height*/
  6. position:relative;
  7. z-index:1;
  8. }
  9. #bg{
  10. width:100%; height:100%;
  11. position:absolute;
  12. z-index:0;
  13.  
  14. /*das la transparencia con un png transparente repetido de fondo, ... x.ej. imagen de 2px*2px*/
  15. background:url("ruta/pngtransparente.png") 0 0 repeat;
  16.  
  17. /* ... o bien con opacity, esto es a tu gusto ...
  18. background-color:#000000;
  19. filter:alpha(opacity=75);
  20. opacity: 0.75;
  21. -moz-opacity:0.75;
  22. -khtml-opacity: 0.75;
  23. */
  24.  
  25. /*... o bien con rgba tal como indica isabel
  26. background-color: rgba(0, 0, 255, 0.1);
  27. */
  28. }

Aquí #wrap crecerá segun crezca #contenido, ya que al no declararle height a ninguno todo dependerá del contenido de #contenido,

#contenido tiene un width declarado, lo que indica que solo podrá crecer en alto. Lo que indica también que #wrap solo podrá crecer en alto, pues su alto depende del alto que valla tomando #contenido.

#bg cubrirá todo el ancho y alto de #wrap independiente de lo que suceda entre #contenido y #wrap.
Digamos que #bg se aisló y dijo jódanse entre ustedes yo no me meto ja XD.

Bueno, ahora tu dirás, pero yo quiero darle un alto fijo, este código no me sirve! No cambia mucho, simplemente le das un height a #contenido y #wrap se ajustará a ese alto.

Vimos además que no es necesario javascript de momento, salvo que necesites algo más complejo.
Espero te sirva, en realidad quedó media enredada la explicación pero es simple, cualquier cosa pregunta y lo seguimos viendo. Saludos.

Última edición por cristian_cena; 26/08/2011 a las 00:13