Sprite fade不支持CSS
Sprite fade不支持CSS
提问于 2015-05-06 05:30:34
我正在创建一个标志淡入淡出，所以在悬停时，该标志的颜色从白色淡入蓝色。图像文件是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;}
回答 1
Stack Overflow用户
发布于 2015-05-06 20:21:13
#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;}
经过大量的修补，这是我的工作代码，图像的尺寸需要减半，以便在一半的精灵将在同一时间可见。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30063555
复制相关文章
相似问题
腾讯云开发者
