背景图像未完全显示

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

1. 您确定发布了corect css代码吗？它应该是“#btn”而不是“btn”。
2. 既然你知道你的btn-blk.png的宽度，你为什么不把它放在css中，而是使用宽度：100％？在这里附上图像btn-blk，也许我们将能够更好地理解你想做什么。

Answer 2

您需要将btn的大小设置为图像的大小（以像素为单位）。 CSS不知道你的图像有多大。

由于BTN是内联元素，width:100%是指按钮的宽度，而不是背景图片。

您需要以下内容：

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

Answer 3

与DOM考官（FireBug，Chrome的内部版本或类似内容）进行核实，看看您的<input>代码确实足够大。

作为FYI：“width：100％”不适用于背景图片大小，而是适用于元素相对于其父元素的大小。

Answer 4

还有其他方法可以将图像放入可能更合适的形式：

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