具有背景圖像的響應式css按鈕

如何實現包含背景圖像的響應式按鈕。它就像http://codecanyon.net/item/css3-responsive-pagination/full_screen_preview/4266559 但是，在我的情況下，「prev」和「next」按鈕是一個非常長的文本，在中心只是頁面的「標題」。具有背景圖像的響應式css按鈕

難以縮放背景圖片以確保它適合縮放按鈕並適用於IE。

有沒有人曾經這樣做過？它甚至有可能嗎？

感謝，
三通

來源

2013-07-31 teepusink

您給了我們一個類似的鏈接，但是您能否向我們展示實際問題本身？也許在jsfiddle/codepen中給出代碼（以及問題的截圖）。這會幫助我們更好地理解它。 –

如果你的目標瀏覽器支持CSS3，只需使用的背景大小

.button 
{ 
background:url(img_flwr.gif); 
background-size:contain contain; 
background-repeat:no-repeat; 
}

編輯：當你需要支持IE8及以下，你可以嘗試：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../background.png', sizingMethod='scale'); 

    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../background.png', sizingMethod='scale')";

或dl ie-css3.htc和：

behavior: url(ie-css3.htc);

來源

2013-07-31 04:25:28 Horst

這不適用於IE，因爲它們不支持背景大小。 –

[從IE9開始肯定會這樣]（http://caniuse.com/background-img-opts）。另外，我不推薦'background-size：contains contains'，因爲它的整體意圖是保持縱橫比 - 對寬度和高度單獨指定似乎過度混亂，所以我建議編寫'background-size：contains'。儘管只是一種風格偏好。 –

道歉，我認爲它只有10+，但因爲@teepusink沒有指定IE的版本，我認爲他的意思是9或10以上。 –

具有背景圖像的響應式css按鈕

回答

相關問題