Html 如何在精灵图像上创建css过渡淡入淡出？

我正在为我的一些菜单项使用精灵图像链接，使用背景位置定位。我想做一个淡入淡出悬停效果。我建立了一个

演示

李美孚{
显示：块；
背景：透明url（'http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png")不重复;；
宽度：30px；
高度：30px；
边缘顶部：9px；
左边距：3倍；
}
mobileimage:hover{背景位置：0px-29px；}

像这样的东西

您可以根据需要调整行为。查看更多信息

还要记住，这只是Safari/Chrome/Chrome/等的WebKit示例。其他前缀是（所有动画标记都需要前缀，这只是一个示例）

和框架

@keyframes fadingItOut {
@-moz-keyframes fadingItOut {
@-o-keyframes fadingItOut {
@-ms-keyframes fadingItOut {

---

首先，需要将

.mobileimage:hover

的不透明度设置为小于1的值。要实现跨浏览器兼容性，请尝试：

.mobileimage:hover {
    filter: alpha(opacity=50);
    -khtml-opacity: .5;
    -ms-filter: "alpha(opacity=50)";
    -moz-opacity: .5;
    opacity: .5;
}

然后，要创建实际的过渡效果，您需要告诉

.mobileimage

在不透明度上创建过渡，而不是立即切换到

不透明度：.5

：

.mobileimage {
    -webkit-transition: opacity 500ms ease;/* Saf3.2+, Chrome */
    -moz-transition: opacity 500ms ease;   /* FF4+ */
    -ms-transition: opacity 500ms ease;    /* IE10? */
    -o-transition: opacity 500ms ease;     /* Opera 10.5+ */
    transition: opacity 500ms ease;     
}

---

500ms

是不透明度改变所需的时间，

ease

是过渡效果的类型。查看。

刚刚查看了您的演示，我没有看到IE、FF或Chrome中的任何褪色或过渡，与以前一样，将鼠标悬停在图像上并弹出背景位置更改检查完整答案，添加额外的前缀，它将起作用。

@keyframes fadingItOut {
@-moz-keyframes fadingItOut {
@-o-keyframes fadingItOut {
@-ms-keyframes fadingItOut {

.mobileimage:hover {
    filter: alpha(opacity=50);
    -khtml-opacity: .5;
    -ms-filter: "alpha(opacity=50)";
    -moz-opacity: .5;
    opacity: .5;
}

.mobileimage {
    -webkit-transition: opacity 500ms ease;/* Saf3.2+, Chrome */
    -moz-transition: opacity 500ms ease;   /* FF4+ */
    -ms-transition: opacity 500ms ease;    /* IE10? */
    -o-transition: opacity 500ms ease;     /* Opera 10.5+ */
    transition: opacity 500ms ease;     
}