Question

此论坛的成员非常友好地提供以下CSS滚动代码，该代码“流畅”并且可以根据浏览器大小调整维度。我已将下面的代码与Jfiddle链接一起包括在内：

CSS

.container {
    width: 100%;
    height: 300px;
    background: #f1f1f1;
}
a.widgetbook {
    display:block;
    max-width: 369px;
    max-height: 85px;
    width: 100%;
    height: 100%;
    background: url("http://69.195.124.70/~profetz4/wp-content/themes/artificer/images/btn-contact.jpg") no-repeat left top;
    margin-bottom: 6px;
    background-size: 200%;
}
a.widgetbook:hover {
    background-position: right top;
}

HTML

<div class="container">
<a href="#" class="widgetbook">
</a>
</div>

http://jsfiddle.net/cw6hN/

我正在寻找一个淡入淡出的CSS过渡，它会正确定位变换图像，然后以不透明度1淡入。我能够做到标准按钮（无响应）但是还没弄明白如何将它应用到上面的按钮场景中。任何有关如何最好地实现这一目标的帮助都将非常受欢迎。

提前致谢！

d

Answer 1

将JSFiddle更新为您想要的方式，但使用了2个单独的图像。

将此添加到a.widgetbook

transition:all .6s;

JSFiddle

要获得您正在寻找的'淡入'效果，您需要创建两个不同的图像。

CSS背景转换＆amp;响应（淡出）

1 个答案: