Puis-je utiliser une image d’arrière-plan (CSS: background-image) avec jQuery?

J’ai un élément div avec du texte et une image de fond, qui est définie via la propriété CSS background-image . Est-il possible de fondre l’image d’arrière-plan via 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

MODIFIER

J’ai fait un violon illustrant mon scénario. Fondamentalement, cela configure une background-image initiale et une transition et modifie l’ background-image d’ background-image avec jQuery. Dans mes tests, il n’y a pas de transition animée entre les deux images.

EDIT2

Mon violon révisé fonctionne!

Probablement pas avec jquery mais vous pouvez, avec les transitions css3, voir cet exemple:

http://css3.bradshawentersockets.com/cfimg/

voir aussi cette réponse

Effet de fondu CSS3

J’ai cherché pendant des siècles et finalement j’ai tout mis en place pour trouver ma solution. Les gens disent, vous ne pouvez pas fondre / -out l’id-background-id du html-background. Thats définitivement faux comme vous pouvez le comprendre en mettant en œuvre la démo mentionnée ci-dessous

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; 

Changer l’image d’arrière-plan du corps peut maintenant être facilement fait en utilisant 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(); 

Vous pouvez donner une valeur d’opacité comme

 div {opacity: 0.4;} 

Pour IE , vous pouvez spécifier comme

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

Réduisez la valeur – Augmentez la transparence.

Il n’est pas possible de le faire comme ça, mais vous pouvez superposer un div opaque entre le div avec l’image d’arrière-plan et le texte et faire disparaître celui-ci, donnant ainsi l’apparence de l’arrière-plan.

C’est ce qui a fonctionné pour moi, et son css pur


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

       

Avec le navigateur moderne, je préfère une approche beaucoup plus légère avec un peu de Js et de CSS3 …

 transition: background 300ms ease-in 200ms; 

Regardez cette démo:

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

Vous pouvez fondre votre image d’arrière-plan de différentes manières depuis Firefox 4 …

Votre 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; } 

Votre XHTML:

 
Some Text …

Et c’est tout.

jquery:

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

css

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

html

 

Je sais que je suis en retard, mais j’ai trouvé un moyen d’utiliser jquery qui fonctionne sur tous les navigateurs (je l’ai testé sur chrome, firefox et Ie 9) et les éléments de premier plan sont toujours affichés à la place de la propriété css3 transition.

créer 2 wrapper absolu et en utilisant z-index.

Commencez par définir les éléments qui doivent être placés à l’avant-plan avec la valeur de propriété z-index la plus élevée et les autres éléments (tous inclus dans le corps, donc: body {}) avec une valeur de propriété z-index inférieure -un élément au sol, au moins 2 chiffres plus bas.

Partie HTML:

  

css partie:

  .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 le javascript / jquery:

Je devais changer l'image d'arrière-plan toutes les trois secondes, donc j'ai utilisé un délai d'attente défini.

c'est le code:

  $(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 sortingggered l++; //set the next image index that will be set the next time the setInterval event will be sortingggered }); }; //end of myFunction } //end of main 

J'espère que ma réponse est claire, si vous avez besoin de plus d'explications, commentez-la.

Désolé pour mon anglais 🙂