Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

338
Vistas
Cómo desvanecerse cambiando la imagen de fondo

Quiero desvanecer las imágenes cuando hago este código:

 $("#large-img").css('background-image', 'url('+$img+')');

He intentado poner desvanecimiento en tantos lugares.

Gracias

over 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

Esto es probablemente lo que querías:

 $('#elem').fadeTo('slow', 0.3, function() { $(this).css('background-image', 'url(' + $img + ')'); }).fadeTo('slow', 1);

Con un retraso de 1 segundo:

 $('#elem').fadeTo('slow', 0.3, function() { $(this).css('background-image', 'url(' + $img + ')'); }).delay(1000).fadeTo('slow', 1);
over 4 years ago · Santiago Trujillo Denunciar

0

¿Puedo ofrecer una solución alternativa?

Tuve el mismo problema y el desvanecimiento no funcionó porque desvaneció todo el elemento, no solo el fondo. En mi caso el elemento era el cuerpo, así que solo quería desvanecer el fondo.

Una forma elegante de abordar esto es clasificar el elemento y usar la transición CSS3 para el fondo.

transition: background 0.5s linear;

Cuando cambia el fondo, ya sea con toggleClass o con su código, $("#large-img").css('background-image', 'url('+$img+')'); se desvanecerá según lo definido por la clase.

over 4 years ago · Santiago Trujillo Denunciar

0

Esta fue la única cosa razonable que encontré para desvanecer una imagen de fondo.

 <div id="foo"> <!-- some content here --> </div>

Tu CSS; ahora mejorado con transición CSS3 .

 #foo { background-image: url(a.jpg); transition: background 1s linear; }

Ahora cambia el fondo

 document.getElementById("foo").style.backgroundImage = "url(b.jpg)";

¡Voilà, se desvanece!


Descargo de responsabilidad obvio: si su navegador no es compatible con la propiedad de transition CSS3, esto no funcionará. En cuyo caso, la imagen cambiará sin transición. Dado que <1% de los navegadores de sus usuarios no son compatibles con CSS3, probablemente esté bien. No te engañes, está bien.

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda