web-dev-qa-db-fra.com

Puis-je fondre dans une image de fond (CSS: background-image) avec jQuery?

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

[~ # ~] éditer [~ # ~]

J'ai fait un violon illustrant mon scénario. Fondamentalement, ceci configure un background-image et un transition, et change le background-image avec jQuery. Dans mes tests, il n'y a pas de transition animée entre les deux images.

EDIT2

Mon révisé violon fonctionne!

jquerycsshtml5css3
55
aknuds1

je cherche depuis des lustres et finalement, j'ai tout mis en place pour trouver ma solution. Les gens disent que vous ne pouvez pas insérer/masquer l’image de fond background-image-id de html-background. C’est vraiment faux, comme vous pouvez le constater en mettant en oeuvre 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 de fond 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();
30
user2947794

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

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

voir aussi cette réponse

Effet de fondu CSS

23
Richard

Vous pouvez donner la 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.

5
Dhepthi

Ce 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 le masquer en fondu, ce qui donne l'impression que l'arrière-plan apparaît en fondu.

4
thwd

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

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
  <div id="bg">
    <!-- content here -->
  </div> <!-- end bg -->
</body>
</html>
4
tomter2014

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

transition: background 300ms ease-in 200ms;

Regardez cette démo:

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

3
Nicolas Bonnici

jquery:

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

css

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

html

<div></div>
1
zyad osseyran

Vous pouvez atténuer votre image de fond 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:

<div class="box">
    Some Text …
</div>

Et c'est tout.

1
yokmp

Je sais que je suis en retard, mais jQuery fonctionnait sur tous les navigateurs (je l'ai testé sur chrome, firefox et Ie 9) et les éléments d'avant-plan sont toujours affichés au lieu 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 figurer au premier plan avec la valeur de propriété z-index la plus élevée, et les autres élémets (tous inclus dans le corps, donc: body {}) avec une valeur de propriété z-index inférieure à celle de front. éléments du sol-un, au moins de 2 nombre inférieur.

Partie HTML:

         <div class="wrapper" id="wrapper1"></div>
         <div class="wrapper" id="wrapper2"></div>

partie 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 celui javascript/jquery:

j'avais besoin de changer l'image d'arrière-plan toutes les trois secondes, j'ai donc utilisé un délai d'expiration 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 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

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

désolé pour mon anglais :)

0
Muccagelato