背景图像没有完全显示

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>