我正在使用标准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/