CSS - 移動圖像調整大小

我目前使用的方法是在HTML表格中添加<img src="A-Button-Image.png" style="width:100%;">，並且圖像大小可以根據屏幕大小進行放大和縮小。CSS - 移動圖像調整大小

但是，A-Button-Image.png包含兩個圖像，懸停和正常狀態。因此，我想使用背景位置觸發翻滾效果？有沒有辦法使用CSS來控制背景位置，但不會失去圖像調整大小的能力？我知道有另一個解決方案是onmouseover & onmouseout，但我仍然更喜歡CSS。

感謝

來源

2013-01-31 olo

解決方案是將背景大小設置爲100％，並將填充底部設置爲百分比。

來源

2013-01-31 23:45:05 olo

有一個background-size屬性爲您的需求。只需將其設置爲200％即可獲得可擴展性和可擴展性。

See for yourself。

您甚至可以在精靈中使用兩個以上的圖像。您只需將多個圖像乘以100％，並將結果置於background-size屬性中。

來源

2013-01-31 21:24:53

謝謝！但是一旦文字被刪除，它就不會顯示圖像。和'display：inline-block;'不能正常工作 – olo

這只是因爲我已經將元素的高度設置爲％，但由於默認情況下文檔的內容與內容一樣高，所以我必須在內部放置文本。在真實的情況下，你肯定會把你的圖標放在一個高度大於0的元素中，這樣它就可以正常工作。查看更新的代碼：http://jsfiddle.net/XCUTE/1/。我已經添加了body和html規則來填充所有的窗口空間。現在你不需要任何文字。 –

CSS - 移動圖像調整大小

回答

相關問題