背景圖像沒有完全顯示

Question

我想顯示一個按鈕的背景圖像。該按鈕保存爲.png並用於JSP頁面。問題是，當按鈕被顯示時，它只顯示圖像的一半，我想要顯示整個圖像。

CSS -

#btn { 
background: url(../images/btn-blk.png) no-repeat; 
width: 100%; 
} 

JSP -

<input type="submit" value="Add" id="btn" /> 

還有什麼問題呢？如何讓圖像顯示整個寬度而不是左半邊？

-Thx提前

Answer 1

你需要設置的btn大小爲像素圖像的大小。 CSS不知道你的圖像有多大。

因爲BTN是內聯元素，因此width:100%指的是按鈕的寬度，而不是您的背景圖片。

你需要的東西，如：

btn { 
background: url(../images/btn-blk.png) no-repeat; 
width: 50px; 
height:20px; 
} 

Answer 2

檢查與DOM考官（螢火蟲，Chrome的內部一個，或者類似的東西），看看你的<input>標籤還真是夠大的。

作爲供參考：「寬度：100％」不適用於背景圖像尺寸，但不適用於元素的大小，相對於其父級。

Answer 3

1. 您確定發佈了corect css代碼嗎？它應該是「#btn」而不是「btn」。
2. 既然你知道你的寬度btn-blk.png，爲什麼不把它放在CSS中，而是使用寬度：100％？在這裏附上圖片btn-blk，也許我們將能夠更好地理解你想要做什麼。

Answer 4

有跡象表明，可能更適合把圖像的形式的其他方式：

1. <input type="image" src="../images/btn-blk.png">
2. <button><img src="../images/btn-blk.png"></button>