cómo atenuar la imagen de fondo

Question

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

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

He intentado poner desvanecimiento en tantos lugares.

Gracias

Answer 1

Esto es probablemente lo que quería:

$('#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); 

Answer 2

Opacity sirve para su propósito?

Si es así, intente esto:

$('#elem').css('opacity','0.3') 

Answer 3

Si su tratando de atenuar la imagen Backgound pero deja el primer plano del texto/las imágenes se puede utilizar CSS para separar la imagen de fondo en una nueva posición div y el div que contiene el texto/imágenes, luego se desvanece el fondo div.

Answer 4

Esto puede ayudar a

HTML

<div id="textcontainer">   
    <span id="sometext">This is some information </span> 
    <div id="container"> 

    </div> 
</div> 

CSS

#textcontainer{ 
    position:relative; 
    border:1px solid #000; 
    width :300px; 
    height:300px; 
} 
#container{ 
    background-image :url("http://dcooper.org/gallery/cf_appicon.jpg"); 
    width :100%; 
    height:100%; 
} 
#sometext{ 
    position:absolute; 
    top:50%; 
    left:50%; 
} 

Js

$('#container').css('opacity','.1'); 

Answer 5

¿Puedo ofrecer una solución alternativa?

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

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

transition: background 0.5s linear;

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

Answer 6

Sobre la base de la solución de Creative Group rampante arriba, yo estaba usando jQuery para cambiar la imagen de fondo del cuerpo de la etiqueta:

por ejemplo,

$('body').css({'background': 'url(/wp-content/themes/opdemand/img/bg-sea.jpg) fixed', 'background-size': '100% 100%'}); 

$('body').css({'background': 'url(/wp-content/themes/opdemand/img/bg-trees.jpg) fixed', 'background-size': '100% 100%'}); 

Tenía un temporizador de javascript que cambiaba entre las dos afirmaciones.

Todo lo que tenía que hacer para resolver el problema de crear un fadeOut -> efecto fadeIn fue sugerencia de uso desenfrenado del Grupo creativo y añada

transition: background 1.5s linear; 

a mi código. Ahora se desvanece y brilla maravillosamente.

¡Gracias Rampant Creative Group's y SoupEnvy por la edición!

Answer 7

Esto fue lo único razonable que encontré para fundir una imagen de fondo.

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

Su CSS; ahora mejorado con CSS3 transition.

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

Ahora intercambiar el fondo

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

Voilà, que se desvanece!

---

descargo de responsabilidad obvia: si su navegador no soporta la propiedad CSS3 transition, esto no va a funcionar. En ese caso, la imagen cambiará a sin una transición. Dados <1% del navegador de sus usuarios no son compatibles con CSS3, eso está bien. No te engañes a ti mismo, está bien.

Answer 8

Alguien me señaló este hilo porque tenía el mismo problema pero no funcionó. Después de horas de búsqueda, encontré una solución que usaba esto: https://github.com/rewish/jquery-bgswitcher#readme

Tiene algunas otras opciones además del desvanecimiento.