CSS3淡化效果

Question

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中更改什么？

谢谢！

Answer 1

您无法在两个背景图像之间切换，因为浏览器无法知道您要插入的内容。正如您所发现的，您可以转换背景位置。如果你希望图像在鼠标悬停时淡入，我认为使用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);
}

Answer 2

滚动效果是通过在css中指定通用“背景”属性而不是更具体的背景图像来实现的。通过设置背景属性，动画将在所有属性之间转换。背景颜色，背景图像，背景位置等等因此导致滚动效果..

E.g。

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;
}

Answer 3

可以使用以下结构：

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

等...

<li>包含<a>锚标记，其中包含如上所示的范围。然后插入以下css：

• LI得到position: relative;
• 将<a>标记为height，width
• 设置<span> width＆amp; height至100％，以便<a>和<span>具有相同的维度
• <a>和<span>都获得position: relative;。
• 为每个元素分配相同的背景图像
• <a>代码将为“关闭”background-position，<span>将为“开启”background-poisiton。
• 对于“关闭”状态，请为<span>
使用不透明度0
• 对于“开启”:hover州，请为<span>
使用不透明度1
• 在-webkit元素
上设置-moz或<span>转换

您仍然可以使用转换效果，同时仍然默认为旧的background-position交换。不要忘记插入IE alpha过滤器。