css - Sprite 渐淡不适用于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{
display: inline-block;
height: 298px;
width:165px;
background-image: url(../images/logo-sprite.jpg);
background-position: 0 298px;
-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;

}

#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;

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

在悬停事件期间，将背景图像的位置设置在#logo span上。

更改此：

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;

Working sample code

关于css - Sprite 渐淡不适用于CSS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30063555/