html - 如何在 sprite 图像上创建 css 过渡淡入淡出？

Question

我正在为我的一些菜单项使用 sprite 图像链接，使用 background-position 进行定位。我想在悬停时产生淡入淡出效果。我设置了一个

演示 http://jsfiddle.net/6q2hH/

<li class="mobileimg"><a href="#" class="mobileimage" title="Go Mobile"></a></li>

    li.mobileimg .mobileimage{
     display:block;
     background:transparent url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png')no-repeat;
     width: 30px;
     height:30px;
     margin-top:9px;
     margin-left:3px;
    }

    li.mobileimg .mobileimage:hover {background-position:0px -29px;}

Answer 1

首先，您需要将 .mobileimage:hover 的不透明度设置为小于 1。为了跨浏览器兼容性，请尝试:

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

然后，要创建实际的过渡效果，您需要告诉 .mobileimage 在不透明度上创建过渡，而不是立即切换到 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;     
}

500ms是不透明度改变的时间，ease是过渡效果的类型。查看updated fiddle .