5

以下のコードは、製品をバスケットに追加するためのものです。

入力の購入ボタンとして画像を使用するだけでなく、背景とその上の 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>
4

4 に答える 4

0

これを試して：

HTML:

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

CSS:

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

サルドス！

于 2012-12-28T19:28:53.793 に答える
0

あなたが達成しようとしていることを完全に理解しているかどうかわかりませんか? displayCSS でプロパティを設定できますか？

#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;
}
于 2012-12-28T18:56:54.730 に答える
0

あなたの質問を正しく理解しているかどうかもわかりませんが、

ただし、送信ボタンの無地の背景色について話している場合は、使用できます

<input type="submit" style="background-color: black; color: white;" value="your text" />
于 2012-12-28T18:58:46.443 に答える
0

入力要素の上にテキストを挿入できます。この作品にはlabel要素を使用しています。CSS コードを使用して、ラベル要素の位置を編集できます。

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

于 2015-11-21T14:58:08.427 に答える