Question

波纹管代码用于将产品添加到购物篮中。

我不想在输入中使用图像作为购买按钮，而是想在背景上添加图像或填充，并在其上方添加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>

Answer 1

不确定我完全理解你想要完成的事情？你能在CSS中设置display属性吗？

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

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

<强> EDITED

您是否想要一个可点击的提交按钮，带有图案或“按钮式”填充，但是仍然在按钮“上方”的不同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;
}

Answer 2

不确定我是否理解你的问题，

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

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

Answer 3

试试这个：

HTML：

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

CSS：

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

Saludos！

Answer 4

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

＆＃13;

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

＆＃13;

在<input type =“image”/>上方插入文字

4 个答案: