Question

我正在创建徽标淡入淡出，因此悬停徽标的颜色会从白色变为蓝色。图像文件是289像素x 165像素，这是一个图像中两个标志的大小，直接位于另一个图像之下。

我在其他网站上使用过这个模板，但出于某种原因，这次它不起作用。由于声誉，我无法发布实际的徽标。

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

然后在悬停期间无需设置背景位置，它应该只是这样：

#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

Answer 2

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

}

经过多次修改后，这是适用于我的代码，图像的尺寸需要减半，因此一次可见一半的精灵。

Sprite fade不能使用CSS

2 个答案: