首页 文章

CSS背景转换和响应（淡出）

提问于
浏览 次
0

此论坛的成员非常友好地提供以下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

html css responsive-design fadein transitions

1 回答

  • 2

    根据您的需要更新了JSFiddle，但使用了2个单独的图像 .

    将其添加到 a.widgetbook

    transition:all .6s;

    JSFiddle

    为了获得你正在寻找的'淡入'效果，你需要创建两个不同的图像 .

    回复于

相关问题