背景图像未完全显示

Question

我正在尝试显示按钮的背景图像。 该按钮另存为.png并在JSP页面中使用。 问题是，当显示按钮时，它仅显示图像的一半，我希望显示整个图像。

CSS-

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

JSP-

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

可能是什么问题？ 如何使图像显示整个宽度而不是仅剩下一半？

-提前预付

Answer 1

1. 您确定您发布了corect CSS代码吗？ 它应该是“ #btn”而不是“ btn”。
2. 既然您知道btn-blk.png的宽度，为什么不将其放在CSS中，而是使用width：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>标记确实足够大。

仅供参考：“宽度：100％”不适用于背景图像尺寸，但适用于元素相对于其父元素的尺寸。

Answer 4

还有其他方法可以使图像以更合适的形式放置：

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