15 
a {
    float: left;
    width: 32px;
    height: 32px;
    text-align: left;
    text-indent:-9999px;
    background: url('../img/button.png') no-repeat 0 0;

    -webkit-transition: background 300ms ease-in 2s; /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 2s;
    -o-transition: background 300ms ease-in 2s;
    transition: background 300ms ease-in 2s;


    -webkit-transition-property: background;
    -webkit-transition-duration: 300ms;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-delay: 100ms;

    -moz-transition-property: background;
    -moz-transition-duration: 300ms;
    -moz-transition-timing-function: ease-in;
    -moz-transition-delay: 100ms;

    -o-transition-property: background;
    -o-transition-duration: 300ms;
    -o-transition-timing-function: ease-in;
    -o-transition-delay: 100ms;

    transition-property: background;
    transition-duration: 300ms;
    transition-timing-function: ease-in;
    transition-delay: 100ms;

}

a:hover {
    background:position: 0 -32px;
}

..目前它具有向上/向下滚动效果，但我希望背景随着淡入淡出效果改变，我应该在 CSS 中改变什么？

谢谢！

4

3 回答 3

25

您无法在两个背景图像之间转换，因为浏览器无法知道您想要插入什么。正如您所发现的，您可以转换背景位置。如果您希望图像在鼠标悬停时淡入，我认为使用 CSS 过渡的最佳方法是将图像放在包含元素上，然后在链接本身上将背景颜色设置为透明：

span {
    background: url(button.png) no-repeat 0 0;
}
a {
    width: 32px;
    height: 32px;
    text-align: left;
    background: rgb(255,255,255);

    -webkit-transition: background 300ms ease-in 200ms; /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 200ms;
    -o-transition: background 300ms ease-in 200ms;
    transition: background 300ms ease-in 200ms;
    }
a:hover {
    background: rgba(255,255,255,0);
}
于 2010-06-26T19:07:39.540 回答
4

滚动效果是通过在您的 css 中指定通用的“背景”属性而不是更具体的背景图像引起的。通过设置 background 属性，动画会在所有属性之间进行过渡。Background-Color、Background-Image、Background-Position..等从而产生滚动效果..

例如

a {
-webkit-transition-property: background-image 300ms ease-in 200ms;
-moz-transition-property: background-image 300ms ease-in 200ms;
-o-transition-property: background-image 300ms ease-in 200ms;
transition: background-image 300ms ease-in 200ms;
}
于 2011-02-11T00:23:37.423 回答
3

有可能，使用下面的结构：

<li><a><span></span></a></li>
<li><a><span></span></a></li>

ETC...

其中<li>包含一个<a>包含如上所示跨度的锚标记。然后插入以下css：

  • 李得到position: relative;
  • 给<a>标签 a height,width
  • 将<span> width&设置height为 100%，以便两者<a>和<span>具有相同的尺寸
  • 两者兼得。<a>_<span>position: relative;
  • 为每个元素分配相同的背景图像
  • <a>标签将具有 'OFF' background-position，并且<span>将具有 'ON' background-poisiton。
  • 对于“关闭”状态，使用不透明度 0<span>
  • 对于“开”:hover状态，使用不透明度 1<span>
  • 在元素上设置-webkitor-moz过渡<span>

您将能够使用过渡效果，同时仍默认使用旧background-position交换。不要忘记插入 IE alpha 过滤器。

于 2010-12-29T03:53:11.750 回答