Sprite fade不适用于CSS

我创建了一个标志褪色，所以悬停的颜色的标志褪色从白色到蓝色。图像文件为289px x 165px，是一幅图像中两个徽标的大小，位于另一幅图像的正下方

我曾在其他网站上使用过这个模板，但由于某些原因，这次它不起作用。我不能张贴实际的标志，因为声誉

<div id="logo"> <a href="#home"> <span> </span> </a> </div>

#logo a {
display:inline-block;
height: 298px;
width:165px;
background-image: url(../images/logo-sprite.jpg);
float:left;

}

---

}

您当前正在为不透明度更改添加过渡。因此，要为背景图像添加过渡，您需要添加以下内容：

更新以上答案确实会显示背景图片幻灯片。 要解决这个问题：

在悬停事件期间，改为在徽标跨度上设置背景图像的位置

更改此项：

为此：

然后在悬停过程中，不需要设置背景位置，应该是这样的：

#logo span:hover {
  opacity: 1;
}

更新 删除背景位置转换

发件人：

致：

}

}

}

}

---

经过多次修改后，这是对我有效的代码，图像的尺寸需要减半，这样一半的精灵将在同一时间可见

我补充说，它现在产生了向下翻滚的效果，雪碧的两个部分总是visible@amyOakes对于显示的有限代码，我假设您已经处理了在悬停期间隐藏默认背景图像的问题。我显示的代码是我在整个悬停事件中使用的全部代码。我已经添加了您所说的内容，但现在图像只是静态的，它不会滚动或褪色，并且两个部分仍然可见。抱歉，如果我太笨了。我已经用你告诉我要更改的代码更新了问题。@AmyOakes现在看起来怎么样？它实现了你想要的吗？

#logo span:hover{
opacity: 1;

-webkit-transition:background-position 1s ease;
-moz-transition:background-position 1s ease;
-o-transition:background-position 1s ease;
transition: background-position 1s ease;

background-position: 0 0;

background-position: 0 298px;

#logo span:hover {
  opacity: 1;
}

-webkit-transition:opacity background-position 1s ease;
-moz-transition:opacity background-position 1s ease;
-o-transition:opacity background-position 1s ease;
transition: background-position 1s ease;

-webkit-transition:opacity 1s ease;
-moz-transition:opacity 1s ease;
-o-transition:opacity 1s ease;
transition: opacity 1s ease;

#logo a {
display:block;
height: 149px;
width:165px;
background-image: url(../images/logo-sprite.jpg);
float:left;
background-position: 0 0;

#logo a:hover {
height: 149px;
width:165px;
background-image: url(../images/logo-sprite.jpg);
float:left;
background-position: 0 -149px;

#logo span{ 
height: 149px;
width:165px;
display:none;
background-image: url(../images/logo-sprite.jpg);
opacity: 0;
 -webkit-transition:opacity 0.3s ease-in;
 -moz-transition:opacity 0.3s ease-in;
 -o-transition:opacity 0.3s ease-in;

#logo span{
opacity: 1;