¿Puedo fundirme en una imagen de fondo (CSS: background-image) con jQuery?

Tengo un elemento div con texto y una imagen de fondo, que se establece a través de la background-image propiedad CSS. ¿Es posible desvanecerse en la imagen de fondo a través de jQuery?

 div { background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg); border: 1px solid #666; height: 10em; } 
 
Text

EDITAR

He hecho un violín que ejemplifica mi situación. Básicamente, esto configura una background-image inicial y una transition , y cambia la background-image con jQuery. En mi prueba no hay transición animada entre las dos imágenes.

EDIT2

¡Mi violín revisado funciona!

Probablemente no con jquery pero puede con transiciones css3 ver este ejemplo:

http://css3.bradshawenterprises.com/cfimg/

también veo esta respuesta

Efecto de desvanecimiento CSS3

He estado buscando por años y finalmente junté todo para encontrar mi solución. La gente dice que no se puede fundir / deshabilitar la imagen de fondo id del fondo html. Eso es definitivamente incorrecto, ya que puede averiguar mediante la implementación de la demostración mencionada a continuación

CSS:

 html, body height: 100%; /* ges Hoehe der Seite -> weitere Hoehenangaben werden relativ hierzu ausgewertet */ overflow: hidden; /* hide scrollbars */ opacity: 1.0; -webkit-transition: background 1.5s linear; -moz-transition: background 1.5s linear; -o-transition: background 1.5s linear; -ms-transition: background 1.5s linear; transition: background 1.5s linear; 

Cambiar la imagen de fondo del cuerpo ahora se puede hacer fácilmente usando JavaScript:

 switch (dummy) case 1: $(document.body).css({"background-image": "url("+URL_of_pic_One+")"}); waitAWhile(); case 2: $(document.body).css({"background-image": "url("+URL_of_pic_Two+")"}); waitAWhile(); 

Puedes dar el valor de opacidad como

 div {opacity: 0.4;} 

Para IE , puede especificar como

 div { filter:alpha(opacity=10));} 

Baje el valor – Mayor la transparencia.

No es posible hacerlo así simplemente, pero puedes superponer un divisor opaco entre el div con la imagen de fondo y el texto y desvanecer ese, por lo tanto, dando la apariencia de que el fondo se está desvaneciendo.

Esto es lo que funcionó para mí, y su css puro


css

 html { padding: 0; margin: 0; width: 100%; height: 100%; } body { padding: 0; margin: 0; width: 100%; height: 100%; } #bg { width: 100%; height: 100%; background: url('/image.jpg/') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-animation: myfirst 5s ; /* Chrome, Safari, Opera */ animation: myfirst 5s ; } /* Chrome, Safari, Opera */ @-webkit-keyframes myfirst { from {opacity: 0.2;} to {opacity: 1;} } /* Standard syntax */ @keyframes myfirst { from {opacity: 0.2;} to {opacity: 1;} } 

html

 < !DOCTYPE html>      

Con el navegador moderno prefiero un enfoque mucho más ligero con un poco de Js y CSS3 …

 transition: background 300ms ease-in 200ms; 

Mira esta demostración:

http://codepen.io/nicolasbonnici/pen/gPVNbr

Puede desvanecer su imagen de fondo de varias maneras desde Firefox 4 …

Su CSS:

 .box { background: #CCCCCC; -webkit-transition: background 0.5s linear; -moz-transition: background 0.5s linear; -o-transition: background 0.5s linear; transition: background 0.5s linear; } .box:hover { background: url(path/to/file.png) no-repeat #CCCCCC; } 

Tu XHTML:

 
Some Text …

Y eso es.

jquery:

  $("div").fadeTo(1000 , 1); 

css

  div { background: url("../images/example.jpg") no-repeat center; opacity:0; Height:100%; } 

html

 

Sé que llego tarde, pero encontré una forma de usar jquery que funciona en todos los navegadores (lo probé en Chrome, Firefox y Ie 9) y los elementos de primer plano se muestran siempre en lugar de la propiedad de transición de css3.

crear 2 contenedores absolutos y usar z-index.

Primero configure los elementos que deben estar en primer plano con el mayor valor de propiedad del índice Z, y los otros elementos (todos incluidos en el cuerpo, así que: cuerpo {}) con un valor de propiedad de índice Z más bajo que el anterior -los elementos del suelo’uno, al menos de 2 números más abajo.

Parte de HTML:

  

parte de css:

  .fore-groundElements{ //select all fore-ground elements z-index:0; //>=0 } .wrapper{ background-size: cover; width:100%; height:100%; background-size: 100% 100%; position:absolute; } #wrapper1{ z-index:-1; } #wrapper2{ z-index:-2; } body{ height:100%; width:100%; margin:0px; display:cover; z-index:-3 //< =-3 } 

que el javascript / jquery uno:

Necesitaba cambiar la imagen de fondo cada tres segundos, así que usé un tiempo de espera establecido.

este es el código:

  $(document).ready(main); var main = function(){ var imgPath=[imagesPath1,..,...]; // the array in which store the image paths var newWrapper; // the wrapper to display var currentWrapper; //the current displayed wrapper which has to be faded var l=2; // the next image index to be displayed, it is set to 2 because the first two position of the array(first two images) start already setted up var imgNumber= imgPath.length; //to know when the images are over and restart the carousel var currentImg; //the next image path to be displayed $('#wrapper1').css("background-image", 'url'+imgPath[0]); //pre set the first wrapper background images $('#wrapper2').css("background-image", 'url'+imgPath[1]); //pre set the first wrapper background images setInterval(myfunction,3000); //refresh the background image every three seconds function myfunction(){ if(l===imgNumber-1){ //restart the carousel if every single image has already been displayed l=0; }; if(l%2==0||l%2==2){ //set the wrapper that will be displaied after the fadeOut callback function currentWrapper='#wrapper1'; newWrapper='#wrapper2'; }else{ currentWrapper='#wrapper2'; newWrapper='#wrapper1'; }; currentImg=imgPath[l]; $(currentWrapper).fadeOut(1000,function(){ //fade out the current wrapper, so now the back-ground wrapper is fully displayed $(newWrapper).css("z-index", "-1"); //move the shown wrapper in the fore-ground $(currentWrapper).css("z-index","-2"); //move the hidden wrapper in the back ground $(currentWrapper).css("background-image",'url'+currentImg); // sets up the next image that is now shown in the actually hidden background wrapper $(currentWrapper).show(); //shows the background wrapper, which is not visible yet, and it will be shown the next time the setInterval event will be triggered l++; //set the next image index that will be set the next time the setInterval event will be triggered }); }; //end of myFunction } //end of main 

Espero que mi respuesta sea clara, si necesitas más explicaciones coméntalo.

Lo siento por mi ingles 🙂