Foros del Web » Creando para Internet » CSS »

duda sobre opacidad

Estas en el tema de duda sobre opacidad en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 25/08/2011, 12:46
 
Fecha de Ingreso: agosto-2011
Ubicación: Venezuela
Mensajes: 108
Antigüedad: 5 años, 4 meses
Puntos: 5
duda sobre opacidad

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
  #2 (permalink)  
Antiguo 25/08/2011, 14:02
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 5 meses
Puntos: 1008
Respuesta: duda sobre opacidad

rgba es css3 así que no lo acepta ie8-, ie9 no lo sé
  #3 (permalink)  
Antiguo 25/08/2011, 16:44
 
Fecha de Ingreso: agosto-2011
Ubicación: Venezuela
Mensajes: 108
Antigüedad: 5 años, 4 meses
Puntos: 5
Respuesta: duda sobre opacidad

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
  #4 (permalink)  
Antiguo 25/08/2011, 18:50
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 5 meses
Puntos: 269
Respuesta: duda sobre opacidad

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.
  #5 (permalink)  
Antiguo 25/08/2011, 22:53
 
Fecha de Ingreso: agosto-2011
Ubicación: Venezuela
Mensajes: 108
Antigüedad: 5 años, 4 meses
Puntos: 5
Respuesta: duda sobre opacidad

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
  #6 (permalink)  
Antiguo 26/08/2011, 01:05
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 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 01:13
  #7 (permalink)  
Antiguo 26/08/2011, 19:09
 
Fecha de Ingreso: agosto-2011
Ubicación: Venezuela
Mensajes: 108
Antigüedad: 5 años, 4 meses
Puntos: 5
Respuesta: duda sobre opacidad

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
  #8 (permalink)  
Antiguo 27/08/2011, 10:15
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 5 meses
Puntos: 269
Respuesta: duda sobre opacidad

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 :)
  #9 (permalink)  
Antiguo 27/08/2011, 18:47
 
Fecha de Ingreso: agosto-2011
Ubicación: Venezuela
Mensajes: 108
Antigüedad: 5 años, 4 meses
Puntos: 5
Respuesta: duda sobre opacidad

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

Etiquetas: contenido, opacidad
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




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