CSS3 - 在精灵图像的“背景位置”之间淡入淡出答案

【问题标题】：CSS3 - Fade between 'background-position' of a sprite imageCSS3 - 在精灵图像的“背景位置”之间淡入淡出
【发布时间】：2013-03-31 18:15:19
【问题描述】：

我想在精灵图像的“背景位置”之间淡出仅使用 CSS。我找到了很多教程，但我没有找到像这样简单的东西：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 - Fade between 'background-position' of a sprite image</title>
<style type="text/css">
div{
    width:  120px;
    height: 60px;

    background-image:       url('sprite.jpg');
    background-repeat:      no-repeat;
    background-position:    0   0;

}
div:hover{
    background-position:    0   -60px;
}
</style>
</head>
<body>
<div></div>
</html>

谢谢。

【问题讨论】：

您还没有设置任何淡入淡出。您可以使用 javascript 或 css3 动画来实现，具体取决于您希望支持的浏览器数量。
这是一篇关于css-tricks.com/fade-image-within-sprite主题的好文章

标签： css image sprite fade background-position

【解决方案1】：

我找到答案了，还是谢谢。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 - Fade between 'background-position' of a sprite image</title>
<style type="text/css">
#button{
    float:                  left;
    background-image:       url('sprite.jpg');
    background-position:    0 -60px;
    background-repeat:      no-repeat;

    width:              120px;
    height:             60px;
}
#button a{
    background-image:       url('sprite.jpg');
    background-position:    0 0;
    background-repeat:      no-repeat;

    width:              120px;
    height:             60px;

    display:            block; 
    text-indent:        -9999px; 

    transition:         opacity 0.3s ease-in-out;
    -moz-transition:    opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition:      opacity 0.3s ease-in-out;
}
#button a:hover, 
#button a:focus{ 
    opacity:            0; 
}


</style>
</head>
<body>
<div id="button"><a href="#"></a></div>
</html>

【讨论】：

【解决方案2】：

您可以将CSS3 Animation 与@keyframes 一起使用

div:hover{
  animation: logo 2s 0 linear;
}
@keyframes logo{
  0%   { opacity: 1; }
  5%   { opacity: 0; }
  50%  { background-position: 0 -60px; opacity: 0; }
  100% { background-position: 0 -60px; opacity: 1; }
}

示例：http://jsfiddle.net/Y8W9S/

当然，现在你要调整你想要实现的时间和效果。

希望对您有所帮助或指出正确的方向。

祝你好运。

【讨论】：

【解决方案3】：

所以基本上，你需要对:hover执行两件事

background-position改
fadein效果

CSS3 过渡在这种情况下不会有用。您可以使用 CSS3 动画属性。

animation 属性接受name 的动画和持续时间。可以提供多个动画名称，以逗号分隔。

您需要定义这些动画名称。它们可以是您选择的任何字符串，但您需要定义它们。所以考虑这个css：

div:hover{
   animation: fadein 10s, bp 0.5s;
   -moz-animation: fadein 10s, bp 0.5s; /* Firefox */
   -webkit-animation: fadein 10s, bp 0.5s; /* Safari and Chrome */
   -o-animation: fadein 10s, bp 0.5s; 
    background-position:0 0;
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes bp { /* Safari and Chrome */
    from {
        background-position:-200px 0;
    }
    to {
        background-position:0 0;
    }
}

查看此fiddle，了解完整的浏览器支持动画

注意：它肯定不会在 IE

【讨论】：

这是一张幻灯片，不是精灵背景位置之间的渐变
@CBuzatu 现在看看我的答案！

【解决方案4】：

这样使用：

div{
    width:  120px;
    height: 60px;

    background-image: url('sprite.jpg');
    background-repeat: no-repeat;
    background-position: 0   0;
    transition: background-position 1s ease;

}

别忘了可选的供应商前缀

编辑：

我注意到你需要淡入淡出。您尝试类似这样的解决方案：

div{
    background: url(foo.jpg) no-repeat 0 0 transparent;
    transition: background: 1s ease;
}

div:hover{
    background: rgba(0, 0, 0, 1);
}

我不能试试这个，因为我是手机上的。

【讨论】：

这将滑动背景图像，而不是淡入淡出。
这不是精灵图像位置之间的淡入淡出。
div 是透明的，这将显示一个白色页面，悬停时会变成黑色......我不明白你尝试了什么。