css - Sprite 淡入淡出不适用于 CSS

Question

我正在创建 Logo 淡入淡出，因此悬停时 Logo 的颜色会从白色逐渐变为蓝色。图片文件为 289 像素 x 165 像素，这是一张图片中两个 Logo 的大小，位于另一张图片的正下方。

我在其他网站上使用过这个模板，但由于某种原因这次无法使​​用。由于声誉原因，我无法发布实际 Logo 。

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

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

那么hover时就不用设置背景位置了，应该是这样的:

#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