Foros del Web » Creando para Internet » CSS »

Background invisible que aparece si meto opacity (??)

Estas en el tema de Background invisible que aparece si meto opacity (??) en el foro de CSS en Foros del Web. Aquí muestro algo que me tiene desquiciado Arriba podemos ver el background del texto, que abajo ha desaparecido. La única diferencia es que arriba el ...
  #1 (permalink)  
Antiguo 16/04/2014, 10:29
Avatar de Linton  
Fecha de Ingreso: diciembre-2011
Ubicación: Viena
Mensajes: 1.213
Antigüedad: 12 años, 3 meses
Puntos: 55
Background invisible que aparece si meto opacity (??)

Aquí muestro algo que me tiene desquiciado Arriba podemos ver el background del texto, que abajo ha desaparecido. La única diferencia es que arriba el div del texto tiene indicado opacity:.4; o sea que si quito la regla para opacity el background se hace invisible


El html:

Código HTML:
Ver original
  1. <div class="caja">
  2.     <img src="aviones.jpg">
  3.     <div class="transparent1">Aviones</div>
  4. </div>

Y el CSS, avión de arriba:

Código CSS:
Ver original
  1. width: 30%;
  2.     font: 70px Helvetica;
  3.     font-weight: bold;
  4.     color: red;
  5.     background: gray;
  6.     opacity: .4;}

...y avión de abajo:

Código CSS:
Ver original
  1. width: 30%;
  2.     font: 70px Helvetica;
  3.     font-weight: bold;
  4.     color: red;
  5.     background: gray;

¿Alguien sabe por qué ocurre esto? Gracias, un saludo.

Última edición por Linton; 16/04/2014 a las 14:11
  #2 (permalink)  
Antiguo 18/04/2014, 11:06
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Background invisible que aparece si meto opacity (??)

No puedo reproducir el problema. Inténtalo poner en un filete.
  #3 (permalink)  
Antiguo 18/04/2014, 11:57
Avatar de Linton  
Fecha de Ingreso: diciembre-2011
Ubicación: Viena
Mensajes: 1.213
Antigüedad: 12 años, 3 meses
Puntos: 55
Respuesta: Background invisible que aparece si meto opacity (??)

¿Qué es eso y para qué sirve?
  #4 (permalink)  
Antiguo 18/04/2014, 11:59
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Background invisible que aparece si meto opacity (??)

Para publicar el HTML y CSS y luego ver el resultado. Es que con ese código que pones no se reproduce el problema, así que debe de haber algo más de código supongo.
  #5 (permalink)  
Antiguo 19/04/2014, 00:00
Avatar de Linton  
Fecha de Ingreso: diciembre-2011
Ubicación: Viena
Mensajes: 1.213
Antigüedad: 12 años, 3 meses
Puntos: 55
Respuesta: Background invisible que aparece si meto opacity (??)

¿Y las fotos se suben ahí también, o cómo?
  #6 (permalink)  
Antiguo 19/04/2014, 01:21
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Background invisible que aparece si meto opacity (??)

No. Pero bueno, ¿sin foto no pasa eso? Creo que no hace falta, pero en caso contrario, siempre tienes imgur.
  #7 (permalink)  
Antiguo 19/04/2014, 05:10
Avatar de Linton  
Fecha de Ingreso: diciembre-2011
Ubicación: Viena
Mensajes: 1.213
Antigüedad: 12 años, 3 meses
Puntos: 55
Respuesta: Background invisible que aparece si meto opacity (??)

Rayos, pues he hecho otro montaje y no pasa... A ver si detecto el fallo en el código del comienzo.

¡Gracias!

Última edición por Linton; 19/04/2014 a las 05:20
  #8 (permalink)  
Antiguo 19/04/2014, 05:46
Avatar de Linton  
Fecha de Ingreso: diciembre-2011
Ubicación: Viena
Mensajes: 1.213
Antigüedad: 12 años, 3 meses
Puntos: 55
Respuesta: Background invisible que aparece si meto opacity (??)

Vale, aquí lo tienes en todo su esplendor Activa la regla de opacity al CSS y ya verás lo que sucede.
  #9 (permalink)  
Antiguo 19/04/2014, 07:38
 
Fecha de Ingreso: mayo-2013
Mensajes: 207
Antigüedad: 10 años, 10 meses
Puntos: 31
Respuesta: Background invisible que aparece si meto opacity (??)

Sin valor de opacidad: el color gris esta en el fondo, mientras que tienes la imagen como elemento. Es como si pones una imagen en el fondo y otra como elemento img, la última tapara a la otra.

Con un valor de opacidad dado el funcionamiento cambia. Creo que no te va solapando los fondos de más a menos general, sino que te saca ese fondo y lo aplica tras el contenido frontal del mismo.

Puedes quitar la imagen como elemento y ponerla como fondo, usando algo asi.
Código CSS:
Ver original
  1. .caja{
  2.     width: 670px;
  3.     height: 355px;
  4.     background-image: url('http://www.lorempixum.com/670/355')
  5. }
  #10 (permalink)  
Antiguo 19/04/2014, 08:33
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Background invisible que aparece si meto opacity (??)

O le pones una posición relativa, también vale. Aunque si un fondo es un fondo, semánticamente sería más correcto hacer como dice alzacon.
  #11 (permalink)  
Antiguo 19/04/2014, 10:21
Avatar de Linton  
Fecha de Ingreso: diciembre-2011
Ubicación: Viena
Mensajes: 1.213
Antigüedad: 12 años, 3 meses
Puntos: 55
Respuesta: Background invisible que aparece si meto opacity (??)

Gracias a los dos, sobre todo quería asegurarme de que no genera otros fallos más gordos Un saludo.

Etiquetas: background, color, html, invisible, opacity
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 16:43.