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過度響應佈局

回答

相關問題