web-dev-qa-db-fra.com

Transition d'image de fond CSS3

J'essaie de créer un effet de "fondu en entrée" en utilisant la transition CSS. Mais je ne peux pas que cela fonctionne avec l'image de fond ...

Le CSS:

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    background: transparent;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

.title a:hover {
    background: transparent;
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}​

Jetez un coup d'oeil: http://jsfiddle.net/AK3La/

csscss3backgroundbackground-imagecss-transitions
90
Nick Zani

Vous pouvez transférer background-image. Utilisez le CSS ci-dessous sur l'élément img:

-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;

Ceci est supporté nativement par Chrome, Opera et Safari. Firefox ne l'a pas encore implémenté ( bugzil.la ). Pas sûr de IE.

87
Hengjie

La solution (que j'ai trouvée par moi-même) est un truc de ninja, je peux vous offrir deux manières:

vous devez d’abord créer un "conteneur" pour le <img>, il contiendra simultanément les états normal _ et survol:

<div class="images-container">
    <img src="http://lorempixel.com/400/200/animals/9/">
    <img src="http://lorempixel.com/400/200/animals/10/">
</div>

Fondamentalement, vous devez masquer l'état "normal" et afficher leur "survol" lorsque vous le survolez

et voilà, j'espère que quelqu'un le trouvera utile.

34
Ruffo

J'ai trouvé une solution qui a fonctionné pour moi ...

Si vous avez un élément de liste (ou div) contenant uniquement le lien, et disons que c'est pour les liens sociaux sur votre page vers Facebook, Twitter, etc. et vous utilisez une image Sprite, vous pouvez le faire:

<li id="facebook"><a href="facebook.com"></a></li>

Faire du fond de "li" votre image de bouton

#facebook {
   width:30px;
   height:30px;
   background:url(images/social) no-repeat 0px 0px;
}

Puis, placez l’image d’arrière-plan du lien sur l’état de survol du bouton. Ajoutez également l'attribut d'opacité à cela et définissez-le sur 0.

#facebook a {
   display:inline-block;
   background:url(images/social) no-repeat 0px -30px;
   opacity:0;
}

Maintenant, tout ce dont vous avez besoin est "opacité" sous "a: hover" et définissez-le sur 1.

#facebook a:hover {
   opacity:1;
}

Ajoutez les attributs de transition d'opacité de chaque navigateur à "a" et "a: hover" pour que le fichier final css ressemble à ceci:

#facebook {
   width:30px;
   height:30px;
   background:url(images/social) no-repeat 0px 0px;
}
#facebook a {
   display:inline-block;
   background:url(images/social) no-repeat 0px -30px;
   opacity:0;
   -webkit-transition: opacity 200ms linear;
   -moz-transition: opacity 200ms linear;
   -o-transition: opacity 200ms linear;
   -ms-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}
#facebook a:hover {
   opacity:1;
   -webkit-transition: opacity 200ms linear;
   -moz-transition: opacity 200ms linear;
   -o-transition: opacity 200ms linear;
   -ms-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}

Si je l’ai bien expliqué, cela devrait vous permettre d’avoir un bouton d’image d’arrière-plan qui s’efface, espérons que cela aide au moins!

14
Austin Parrish Thomas

Malheureusement, vous ne pouvez pas utiliser la transition sur background-image, consultez la liste w3c de propriétés animables .

Vous voudrez peut-être faire quelques astuces avec background-position.

10
Olwaro

Vous pouvez utiliser le pseudo élément pour obtenir l’effet souhaité, comme je l’ai fait dans ce cas - Fiddle .

CSS:

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    position: relative;
}
.title a:after {
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    content: "";
    opacity: 0;
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    /* TRANSISITION */
    transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
}
.title a:hover:after{   
    opacity: 1;
}

HTML:

<div class="title">
    <a href="#">HYPERLINK</a>
</div>
10
MaxCloutier

Si vous pouvez utiliser jQuery, vous pouvez essayer BgSwitcher plugin pour changer l’image d’arrière-plan avec des effets, elle est très facile à utiliser.

Par exemple :

$('.bgSwitch').bgswitcher({
        images: ["style/img/bg0.jpg","style/img/bg1.jpg","style/img/bg2.jpg"],
        effect: "fade",
        interval: 10000
});

Et ajoutez votre propre effet, voir ajout d'un effet

9
MaxDhn

Si animer opacity n'est pas une option, vous pouvez également animer background-size.

Par exemple, j'ai utilisé cette CSS pour définir un backgound-image avec un délai.

.before {
  background-size: 0;
}

.after {
  transition: background 0.1s step-end;
  background-image: $path-to-image;
  background-size: 20px 20px;
}
3
shock_one

Salam, cette réponse ne fonctionne que dans Chrome, car IE et FF prennent en charge la transition de couleur. 

Il n'est pas nécessaire de rendre vos éléments HTML opacity:0, car ils contiennent parfois du texte, et il n'est pas nécessaire de doubler vos éléments !.

La question avec un lien vers un exemple dans jsfiddle nécessitait une petite modification, qui consiste à placer une image vide dans .title a comme background:url(link to an empty image); identique à celle que vous avez placée dans .title a:hover mais à en faire une image vide, et le code fonctionnera.

.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: url(https://upload.wikimedia.org/wikipedia/commons/5/59/Empty.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
  }
  .title a:hover{   background: transparent;
   background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
}

Regardez ceci https://jsfiddle.net/Tobasi/vv8q9hum/

1
mohammed Suleiman

Essayez ceci, l’arrière-plan animé fonctionnera sur une application mobile hybride mais Web Ne fonctionne pas

@-webkit-keyframes breath {
 0%   {  background-size: 110% auto; }
 50%  {  background-size: 140% auto; }
 100% {  background-size: 110% auto; }      
}
body {
   -webkit-animation: breath 15s linear infinite;
   background-image: url(images/login.png);
    background-size: cover;
}
1
Hesham Nasser

Considérant que les images de fond ne peuvent pas être animées, J'ai créé un petit mix SCSS permettant de faire la transition entre 2 images de fond différentes en utilisant les pseudo sélecteurs avant et après. Ils sont à différentes couches de z-index. Celui qui est devant commence avec l'opacité 0 et devient visible avec le survol. 

Vous pouvez également utiliser la même approche pour créer des animations avec des dégradés linéaires.

scss

@mixin bkg-img-transition( $bkg1, $bkg2, $transTime:0.5s ){  
  position: relative;  
  z-index: 100; 
  &:before, &:after {
    background-size: cover;  
    content: '';    
    display: block;
    height: 100%;
    position: absolute;
    top: 0; left: 0;    
    width: 100%;    
    transition: opacity $transTime;
  }
  &:before {    
    z-index: -101;
    background-image: url("#{$bkg1}");    
  }
  &:after {    
    z-index: -100;
    opacity: 0;
    background-image: url("#{$bkg2}");    
  }
  &:hover {
     &:after{
       opacity: 1; 
     }
  }  
}

Maintenant, vous pouvez simplement l'utiliser avec

@include bkg-img-transition("https://picsum.photos/300/300/?random","https://picsum.photos/g/300/300");

Vous pouvez le vérifier ici: https://jsfiddle.net/pablosgpacheco/01rmg0qL/

0
Pablo S G Pacheco

Avec le post inspirant de Chris ici:

https://css-tricks.com/different-transitions-for-hover-on-hover-off/

J'ai réussi à trouver ceci:

#banner
{
    display:block;
    width:100%;
    background-repeat:no-repeat;
    background-position:center bottom;
    background-image:url(../images/image1.jpg);
    /* HOVER OFF */
    @include transition(background-image 0.5s ease-in-out); 

    &:hover
    {
        background-image:url(../images/image2.jpg);
        /* HOVER ON */
        @include transition(background-image 0.5s ease-in-out); 
    }
}
0
Carol McKay