我正在使用标准CSS(背景定位)来实现简单的过渡状态。该代码具有以像素为单位的指定宽度,这在流体布局的背景下会出现问题。有人可以推荐一种通过“流动性”实现相同的翻转效果的方法吗?这意味着图像可以根据浏览器大小根据需要更改大小。提前致谢 :)

Jfiddle示例:http://jsfiddle.net/QP96Q/

CSS如下:

a.widgetbook {
    display:block;
    width: 369px;
    height: 85px;
    background: url("images/btn-books.jpg") no-repeat left;
    margin-bottom: 6px;
}

a.widgetbook:hover {
    background-position: -369px 0;
}


的HTML

<a href="#" class="widgetbook">
</a>
<br>
<a href="#" class="widgetcontact">

最佳答案

您可以尝试这样的事情:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.widgetbook {width: 25%;}
.widgetbook a {
    display:block;
    width: 100%;
    padding-bottom: 23%;
    background-image: url("btn-contact.jpg");
    background-size: 200% 100%;
    margin-bottom: 6px;
}

.widgetbook a:hover {
    background-position: -100% 0;
}
</style>
</head>
<body>

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

<br>
<a href="#" class="widgetcontact">

</body>
</html>


注意:我必须删除原始URL,因为这样不允许我发布它,因此只需将其放回去,或查看这支笔:http://codepen.io/pageaffairs/pen/DELai

关于html - CSS过高的响应式布局,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20674060/

10-12 04:01
查看更多