如何顯示帶有按鈕的背景圖像

我在IE中遇到了背景大小屬性的問題。所以，爲了彌補這一點，我嘗試使用下面的代碼如何顯示帶有按鈕的背景圖像

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='XYZ.jpg',sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='XYZ.jpg',sizingMethod='scale')";

這工作正常，但問題是，它採取幾秒鐘加載背景圖像。

我的要求是顯示一個帶有背景圖片的按鈕（我的圖片會有一些文字和其他東西）。我還嘗試在屏幕上繪製帶有輸入標籤和按鈕的圖像，但無法弄清楚如何在圖像上放置按鈕（目前它們是一個接一個地）。請給我一個解決方案。

我使用IE 8

來源

2013-12-09 dush

不知道什麼是真正的問題是（嘗試添加更多的代碼？），但如果問題是按鈕時，顯示加載圖像之前，那麼你就可以緩存圖像和時它被加載，然後顯示圖像和按鈕。

new img = document.createElement('img'); 
img.onload = function() { /* ... display image and button */ } 
img.src = 'http://path/to/your/image';

或者，如果是定位問題，使用此：

<div style="position:relative; width:10em; height:1em"> 
    <img src="..." style="position:absolute; left:0; top:0; width:100%; height:100%; display:block;"> 
    <button onclick="..." style="position:absolute; left:0; top:0; width:100%; height:100%; display:block;"> 
</div>

編輯：正如在評論中提到：

<div style="position:relative; width:1024px; height:768px; background:url('...');"> 
    <button onclick="..." style="position:absolute; left:480px; top:376px; width:64px; height:16px;"> 
</div>

來源

2013-12-09 12:47:29

HI，感謝您的解決方案。但我想我的要求並不清楚你。我想在背景中顯示完整大小的圖像（如1024X736）並在該圖像上繪製按鈕（位於圖像的中心） – dush

我添加了代碼以顯示按鈕和背景圖像，但我不確定這是你想要的。也許如果你包括一些JSfiddle的例子... –

嗨，你的解決方案正在工作。 ThanQ :)你可以幫助我如何適應瀏覽器窗口的背景圖片。目前圖像的某些部分沒有顯示出來（我沒有使用你建議的CSS屬性，我將它們用作100％）。我的圖像分辨率爲1920X975 – dush

如何顯示帶有按鈕的背景圖像

回答

相關問題