我正在使用标准 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，因为 SO 不允许我发布它，所以只需将它放回去，或查看此笔:http://codepen.io/pageaffairs/pen/DELai
关于html - 响应式布局的 CSS Overstate，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20674060/