Html CSS背景转换&；响应（衰减）

该论坛的一位成员非常友好地提供了以下CSS滚动代码，该代码是“流动的”，可以根据浏览器大小调整尺寸。我已经包括了下面的代码以及Jfiddle链接：

CSS

HTML

我希望应用一个淡入CSS过渡，将正确定位滚动图像，然后淡入不透明度为1。我可以对一个标准按钮（无响应）执行此操作，但还不知道如何将其应用于上面的按钮场景。任何关于如何最好地实现这一点的帮助都将不胜感激

提前谢谢

---

D

根据您的需要更新了JSFIDLE，但使用了两个单独的图像

将此添加到

a.widgetbook

transition:all.6s


要获得想要的“淡入”效果，您需要创建两个不同的图像。
是否允许使用jQuery？Hi DropOut，在这种情况下没有jQuery。就纯cssHey BeatAlex，谢谢你的回复。您的JSFIDLE示例似乎不允许调整按钮的大小。实际上，我在论坛上找到了一些代码，并将其合并到了本文中。据我所知，它可以工作，并且它使用一个映像来引导。我仍然有兴趣听听社区其他人对我的想法@user2325396工作得很好（你的JSFIDLE），如果我是你，我会同意的！干净，仅使用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;
}

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