CSS过度响应布局

我使用标准的CSS（背景定位）来实现简单的过渡状态。该代码已经指定了像素宽度，这在流体布局的上下文中存在问题。有人可以推荐一种方法来实现与“流动性”相同的翻转效果 - 也就是说，图像可根据浏览器大小根据需要更改大小。感谢提前:)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">

来源

2013-12-19 user2325396

请创造更好的分析的jsfiddle /快速回答或提供任何工作示例 –

看看示例5，您可以将其定制为多个屏幕 http://www.w3.org/TR/css3-mediaqueries/ –

感谢您的答复。根据你的建议，我创建了一个JS小提琴来说明我的意思。另外，当我发布原始的CSS时，我已经将宽度设置为100％，而不是369px。在这一点上，我想达到同样的效果，但有按钮可调整大小。 – user2325396

你可以尝试这样的事：

<!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

来源

2013-12-19 06:22:59

我想出了一个类似的解决方案。这里的关键是'background-size'属性。在我的设置中，我将宽度和高度设置为100％，但将最大宽度和最大高度属性保留为原始值，以便在缩放时获得较好的缩小比例效果，但不会得到不好的结果。 http://jsfiddle.net/cw6hN/ – rescuecreative

不错的例子。你应该把它作为答案。 :-) –

谢谢你的回应。拉尔夫，我同意Rescue的解决方案是理想的，因为我不需要声明百分比宽度:)这正是我所期待的，我欣赏你在提供答案方面的努力。尽管我拥有我现在需要的一切，但我仍然想要了解背景大小的作用：200％。再次感谢！ – user2325396

CSS过度响应布局

回答

相关问题