duda sobre opacidad

[spirron589]

Hola, como bien sabemos si utilizamos la propiedad opacity...en sus distintos metodos para otros navegadores....la opacidad del div afecta tanto el div como el contenido del div osea letras imagenes etc...pero el otro dia lei algo que era creo rgb(); y rgba parece q el rgba era para el IE y el otro para el resto de los navegadores....pero la cosa es que no recuerdo como utilizar eso... y borre el historial de mi explorador asi que no recuerdo la pag...alguien que lo sepa utilizar por favor que me diga como se utiliza muchisimas gracias

[IsaBelM]

rgba es css3 así que no lo acepta ie8-, ie9 no lo sé

[spirron589]

Hola, ok muchas gracias tienes razon no funciona...osea que me quedara usar dos divs para poder hacer la opacidad...:( uno que tenga el contenido y el otro con el fondo....ahora tengo un problema con eso...porq supongamos q el div del contenido el tamaño cambia depende de su contenido...como puedo hacer para que el div de fondo....se adapte a el tamaño del div contenido?....seria con jquery? detectar el tamaño del div contenido....y aplicarselo al div fondo? como haria eso? gracias

[cristian_cena]

Es difícil responder con exactitud, tu pregunta no es precisa, el fondo transparente es plano o es de imagen? tal vez no necesites redimensionar el fondo.

[spirron589]

Hola cristian_cena no pues para nada es una imagen...lo que pasa es que tengo un div por ejemplo llamado fondo....y otro div llamado contenido....y ps el div llamado fondo tiene un background con su opacidad y toh eso, mientras que el div contenido tiene informacion y cosas como esas como input´s textareas y eso.....entonces si vemos...el div #contenido tiene un height o como se escriba que cambia depende de lo que tenga el mismo div #contenido pero si le pongo al div #contenido el height auto entonces es el #contenido el cual es transparente que va a crecer mas hacia abajo

mientras que el div #fondo no sufre ningun cambio osea tiene su min tamaño...la cosa era

con jquery ver el tamaño del div #contenido y al tener los datos del tamaño entonces aplicárselo a el div #fondo se entendio mas o menos? gracias :D y de verdad disculpen las molestias causadas..pero creo q este es un tema el cual servira a muchos ya que no se le puede poner un div opacidad...un contenido dentro de el sin qe el mismo sufra tambien la opacidad...gracias

[cristian_cena]

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:

<div id="wrap"> <!-- contenedor -->
<div id="contenido"><!-- texto, formulario y contenido en gral --></div>
<div id="bg"><!-- fondo --></div>
</div>
 

Código CSS:

#wrap{
position:relative;
}
#contenido{
width: ... ; /*fijate que en ningun momento declaramos un height*/
position:relative;
z-index:1;
}
#bg{
width:100%; height:100%;
position:absolute;
z-index:0;
 
/*das la transparencia con un png transparente repetido de fondo, ... x.ej. imagen de 2px*2px*/
background:url("ruta/pngtransparente.png") 0 0 repeat;
 
/* ... o bien con opacity, esto es a tu gusto ...
background-color:#000000;
filter:alpha(opacity=75); 
opacity: 0.75;
-moz-opacity:0.75; 
-khtml-opacity: 0.75;
*/
 
/*... o bien con rgba tal como indica isabel
background-color: rgba(0, 0, 255, 0.1);
*/
}
 

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.

[spirron589]

wow ok! muchas gracias....lo probare....y tranquilo bueno por lo menos yo entendi tu explicacion....y por lo que veo...si funcionara perfectamente como yo quiero :D muchas gracias

[cristian_cena]

Aclarar que siempre que demos alguna posición absolute o fixed a una capa debemos acompañarla de top/right/bottom/left. Aunque se suela obviar, también es bueno tenerlo presente para las posiciones relativas.

En el ejemplo bastaría con añadir top:0; y left:0; a #bg

pd: gracias isabel por avisar :)

[spirron589]

O.o...lo probe pero no me funciona como necesito....ps necesito que el div #bg tome el mismo height de #contenido o de #wrap...ps el div bg no crece nada de alto ps