在 <input type="image"> 上方插入文本答案

【问题标题】：Insert text above <input type="image">在 <input type="image"> 上方插入文本
【发布时间】：2012-12-28 18:51:04
【问题描述】：

以下代码用于将产品添加到购物篮。

我不想在输入中仅使用图像作为购买按钮，而是希望在背景中添加图像或填充物并在其上方添加 HTML 文本。

<input border="0" src="/images/buy.png" type="image" />

这是完整的代码：

<span class="BuyButton_ProductInfo">
    <table id="BUYSECTION">
        <tbody>
            <tr>
                <td valign="top" align="left">Count<br />
                    <input id="amount" class="TextInputField_ProductInfo" maxlength="6" size="3" name="AMOUNT" value="1" type="text" />
                </td>
                <td>&nbsp;&nbsp;</td>
                <td class="BuyButton_ProductInfo">Buy<br />
                    <input border="0" src="/images/buy.png" type="image" />
                </td>
            </tr>
        </tbody>
    </table>
</span>

【问题讨论】：

<button> 元素呢？像这样：jsfiddle.net/XcrKM

标签： html css webshop

【解决方案1】：

也不确定我是否正确理解了您的问题，

但是，如果您要在提交按钮上使用纯色背景色，则可以使用

<input type="submit" style="background-color: black; color: white;" value="your text" />

【讨论】：

【解决方案2】：

不确定我是否完全理解您要完成的工作？你能在 CSS 中设置display 属性吗？

#BUYSECTION input[type="image"] {  
  display:block;
}

否则，您能详细说明一下吗？也许提供一个JSFiddle 链接来显示问题？

已编辑

您是否想要一个可点击的提交按钮，带有图案或“类似按钮”的填充，但在按钮“上方”的不同 z-index 处仍有文本？

HTML：

<button type="submit">Buy</button>

CSS：

button{
  /* reset the button style properties */
  border:0;
  display:block;
  /* include the image and dimensions */
  width:50px;
  height: 20px;
  background:transparent url("images/buy.png") no-repeat 50% 50%;
  /* format the text */
  text-align:center;
  padding:5px;
  font-weight:bold;
  color:#333;
}

【讨论】：

另一种选择是绝对定位一个或两个，但这可能会在触发按钮上的点击事件时产生意想不到的后果。
感谢您的回复，我真正需要的是：而不是文本是图像按钮一部分的图像。我想在上面放一张图片和 HTML 文本。
那么上面的标记和样式应该可以解决问题。之间的文本将显示，背景将使用 CSS 渲染。

【解决方案3】：

试试这个：

HTML：

<input type="button" value="Texto del boton" class="imgButton" />

CSS：

.imgButton{
background-image:url(/images/buy.png);
width: 100%;
heigth: 100%;    
}

致敬！

【讨论】：

【解决方案4】：

您可以在输入元素上方插入文本。我使用 label 元素来完成这项工作。您可以使用 CSS 代码编辑标签元素位置。

<input src="/images/buy.png" type="image" id="myButton" />
<label for="myButton">Click me or image</label>

【讨论】：

这不是 OP 所要求的。他希望在背景中有图像，在前景中有文本。