CSS de Fondu Entre les Images d'arrière-plan sur le vol Stationnaire

Est-il un moyen que je peux faire la suite?

J'ai une image png transparente sprite qui montre une image standard sur la gauche, et une image pour le :hover état sur la droite.

Est-il un moyen que je peux avoir l'image en fondu de l'image de gauche dans l'image de droite sur :hover en utilisant uniquement des transitions css3? J'ai essayé ce qui suit, mais ça ne fonctionne pas:

li{ -webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; transition:all 0.5s linear;}
li{background:url(/img/sprites.png) 0 -50px no-repeat;}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat;}

Maintenant, le ci-dessus ne animer le fond, c'casseroles de l'image à travers. Ce que je voudrais à la place d'un poêle est un effet de mode ou effet de dissolution.

Mise à JOUR: j'ai fini par avoir à créer deux éléments et juste animer les opacités séparément. C'est un peu bordélique parce que j'ai de spécifier avec précision les marges de chaque élément, mais je suppose que ça va marcher. Merci pour chacuns de l'aide 🙂

OriginalL'auteur Jack | 2011-08-04

  1. 4

    Les dernières nouvelles sur ce sujet:

    Chrome 19 et la plus récente prend en charge background-image transitions:

    Démo:
    http://dabblet.com/gist/1991345

    Infos supplémentaires:
    http://oli.jp/2010/css-animatable-properties/

    +1 meilleure réponse à ce jour. Mais c'est seulement en travaillant en chrome pour le moment
    Vrai, Mais qu'en est-il de la croix des navigateurs prennent en charge ??

    OriginalL'auteur Benjamin

  2. 3

    Vous n'avez pas spécifié de code pour faire la transition.

    http://css3.bradshawenterprises.com/cfimg1/

    Essayez ceci dans votre hover style:

    -webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out; 
transition: opacity 1s ease-in-out;
    Non, j'ai, désolé, je n'ai pas l'inclure. L'opacité se cacher la totalité de l'élément de liste bien, j'en ai besoin pour un fondu à partir d'un fond à l'autre au lieu de déplacer l'image de fond.
    Juste mis à jour à ma question. Désolé à ce sujet.
    Ouais. Quelque chose comme peut-être? jsfiddle.net/BYWW9/1
    c'est très proche de ce que je veux. Je vais regarder à travers le code un peu.

    OriginalL'auteur Joseph Hamilton

  3. 1

    Prendre un coup d'oeil à ceci: http://jsfiddle.net/j5brM/1/

    Je pense que cela convient à vos besoins et c'est un petit peu moins compliqué.

    Merci pour se rendre à l'effort, mais c'est juste les casseroles de l'image d'arrière-plan. Ce dont j'ai besoin est un effet de fondu.
    Je suis désolé! J'ai oublié ce type d'animation que vous besoin. Cependant j'ai essayé de faire ceci: http://jsfiddle.net/ZNsnV/. C'est le mieux que je peux obtenir avec seulement le css et les images d'arrière-plan!
    J'ai fini par avoir à créer deux éléments et juste animer les opacités séparément. C'est un peu bordélique parce que j'ai de spécifier avec précision les marges de chaque élément, mais je suppose que ça va marcher. Merci pour votre aide 🙂

    OriginalL'auteur Rauzippy

  4. 1

    Je ne pense pas que vous pouvez modifier l'opacité de juste les images de fond en CSS, donc, sauf si vous disposez de deux éléments distincts pour l'image de fond (un pour chaque position du sprite) et de modifier l'opacité de deux d'entre eux sur le vol stationnaire, je pense que vous êtes coincé.

    J'avais peur de ça. Quel dommage qu'ils n'ont pas l'inclure dans le css3.
    Oh: il a été suggéré que vous pourriez utiliser :before pour simuler fond d'opacité — voir en bas de nicolasgallagher.com/css-background-image-hacks
    J'ai fini par avoir à créer deux éléments et juste animer les opacités séparément. C'est un peu bordélique parce que j'ai de spécifier avec précision les marges de chaque élément, mais je suppose que ça va marcher. Merci pour votre aide 🙂

    OriginalL'auteur Paul D. Waite

  5. 0
    li{background:url(/img/sprites.png) 0 -50px no-repeat; background:rgba(80, 125, 200, 0.55);}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background:rgba(100, 125, 175, 0);}

    devrait être 

    li{background:url(/img/sprites.png) 0 -50px no-repeat; background-color:rgba(80, 125, 200, 0.55);}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background-color:rgba(100, 125, 175, 0);}

    ne sais pas si la corrige ou pas.

    Malheureusement, ça ne résout pas, mais merci pour cette remarque.
    c'est un peu difficile à visualiser la situation, sans savoir ce que le sprite est... avez-vous une version de développement du site de quelque part?

    OriginalL'auteur Joseph Marikle

  6. 0

    Je sais que cela peut être un peu en retard. Mais j'ai été aux prises avec le même problème pendant un long moment. Aussi transparent que les sprites de nombreuses solutions ne semblent pas fonctionner.

    Ce que j'ai fait est-ce

    HTML

    <div class="sprite-one">
  <span class="foo"></span><span class="zen"></span>
</div>

    CSS

    .sprite-one {
height: 50px
width: 50px
}
.sprite-one span {
width: 50px;
height: 50px;
display: block;
position: absolute;
}
.foo, .zen { 
background-image: url(sprites.png) no-repeat;
-webkit-transition: opacity .6s ease-in-out;
-moz-transition: opacity .6s ease-in-out;
-o-transition: opacity .6s ease-in-out;
transition: opacity .6s ease-in-out;
}
.foo {
background-position: 0 0;
opacity: 1;
}
.zen {
background-position: -50px 0;
opacity: 0;
}
.sprite-one:hover .foo {
opacity: 0;
}
.sprite-one:hover .zen {
opacity: 1;
}

    C'est un pur css chemin & a un peu de beaucoup de codage.. mais semble être le seul moyen que j'ai obtenu l'effet désiré! J'espère que les gens qui aussi de tomber sur ce qui peut trouver de l'aide de ce!

    OriginalL'auteur Minum

  7. 0
    <li class="image transition"></li>

css:
.image{
background-image: url("some/file/path.png");
background-repeat: no-repeat;
width: XXpx;
height: XXpx;
background-position: center center;
background-size: cover;
}

/* DRY */
.transition{
transition: background 0.6s;
-webkit-transition: background 0.6s;
}

.image:hover{
background-image: url("some/file/path_hoverImage.png");
}

    OriginalL'auteur user3242800

  8. -1

    CSS:-

    li {
    background: url(http://oakdale.squaresystem.co.uk/images/solutions.png) no-repeat left center;
    background-size: 89px;
    rembourrage: 54px 0 54px 130px;
    webkit-transition:toutes les 0,5 s linéaire;
    -moz-transition:toutes les 0,5 s linéaire;
    -o-transition:toutes les 0,5 s linéaire;
    transition:toutes les 0,5 s linéaire;
    }

    li:hover {
    background-size: 50px
    }

    OriginalL'auteur Ashish Kumar