Y a-t-il une manière que je puisse faire ce que je peux faire ce qui suit?
J'ai un sprite PNG transparent qui montre une image standard à gauche et une image pour l'état: Survolez à droite.
Y a-t-il une manière que je puisse avoir l'image s'estomper de l'image gauche à la bonne image sur: Hover utilisant uniquement des transitions CSS3? J'ai essayé ce qui suit, mais cela ne fonctionne pas: maintenant, ce qui précède anime l'arrière-plan, il porte l'image à travers. Ce que je voudrais au lieu d'une casserole est un effet de fondu ou dissolvant. Mise à jour: J'ai fini par avoir à créer deux éléments et à animer les opacités séparément. C'est un Tad Messy parce que je dois spécifier les marges exactes de chaque élément, mais je suppose que ça va marcher. Merci pour tout le monde aidez :)
8 Réponses :
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);}
Malheureusement, cela ne l'a pas résolu, mais merci d'avoir souligné cela.
@Jack Il est un peu difficile de visualiser la situation sans savoir ce que le sprite est ... Avez-vous une version de développement du site quelque part?
Vous n'avez pas spécifié de code pour effectuer la transition réelle.
http: // css3. Bradshawenterprises.com/cfimg1/ P>
Essayez ceci dans votre style de navigation: P>
-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 inclus ça. L'opacité cacherait cependant l'élément de la liste complète, j'en ai besoin de s'effacer d'une position d'arrière-plan à un autre au lieu de déplacer l'image de fond.
@Joe c'est très proche de ce que je veux. Je vais devoir regarder un peu le code.
Jetez un coup d'œil à cela: http://jsfiddle.net/j5brm/1/ < / p>
Je pense que cela convient à tous vos besoins et c'est un peu moins compliqué.
Merci d'aller à l'effort, mais cela ne fait que casser l'image de fond. Ce dont j'ai besoin est un effet de fondu.
Je suis désolé! J'ai oublié quel type d'animation dont vous aviez besoin. Cependant, j'ai essayé de faire cela: http://jsfiddle.net/znsnv/ . C'est le meilleur que je puisse obtenir avec seulement des images CSS et de fond!
J'ai fini par avoir à créer deux éléments et à animer les opacités séparément. C'est un Tad Messy parce que je dois spécifier les marges exactes de chaque élément, mais je suppose que ça va marcher. Merci pour ton aide :)
Je ne pense pas que vous puissiez changer l'opacité des images d'arrière-plan de CSS, donc à moins que vous n'ayez deux éléments distincts pour l'image d'arrière-plan (une pour chaque position du sprite) et changez l'opacité des deux sur la survolte , Je pense que tu es coincé.
J'avais peur de ça. Quelle honte qu'ils n'incluaient pas cela dans CSS3.
OH: il a été suggéré de pouvoir utiliser : avant pour simuler l'opacité de fond - voir près du bas de Nicolasgallagher.com/css-background-Image-hacks
J'ai fini par avoir à créer deux éléments et à animer les opacités séparément. C'est un Tad Messy parce que je dois spécifier les marges exactes de chaque élément, mais je suppose que ça va marcher. Merci pour ton aide :)
Les dernières nouvelles sur ce sujet:
Chrome 19 et Newer prend en charge les transitions d'image de fond:
Démo: http://dabblet.com/gist/1991345
Info supplémentaire: http://oli.jp/2010/css-animattable-properties/
+1 Meilleure réponse jusqu'à présent. Mais ça ne travaille que dans le chrome pour l'instant
Vrai, mais qu'en est-il des autres navigateurs croisés ??
Je sais que cela peut être un peu tad retard. Mais je me suis battu avec le même problème depuis longtemps. Aussi avec des sprites transparents, de nombreuses solutions ne semblent pas fonctionner.
Qu'est-ce que j'ai fait est ce P>
.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;
}
<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");
}
li {
Contexte: URL ( http://oakdale.squaresystem.co.uk/images/solutions. png ) non-répéter le centre gauche;
Taille de l'arrière-plan: 89px;
Rembourrage: 54px 0 54px 130px;
WebKit-Transition: Tous 0.5S linéaire;
-MOZ-TRANSITION: Tous 0.5S linéaire;
-O-TRANSITION: Tous 0.5S linéaire;
Transition: Tous 0.5S linéaire;
}
LI: Hover {
Taille de l'arrière-plan: 50px
}
