2012-12-28 23 views
2

波紋管代碼用於將產品添加到籃子中。在<input type =「image」>上方插入文字

而不是隻使用圖像作爲購買按鈕在輸入我想有一個圖像或填充背景和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> 
+0

怎麼樣了''

回答

0

不知道我完全理解你所要完成的?你可以在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; 
} 
+0

另一種方法是將一個或兩個位置完全放置,但是當觸發按鈕上的點擊事件時,這可能會帶來意想不到的後果。 – oomlaut

+0

感謝您的回覆, 我確切需要的是:而不是文字是圖像按鈕的一部分的圖像。 我想把一個圖像,和HTML文本上面。 – RabbitDK

+0

然後上面的標記和樣式應該做的伎倆。將顯示之間的文本,並使用CSS呈現背景。 – oomlaut

0

不知道如果我正確地理解你的問題提出,

但如果你是在談論一個堅實的背景顏色提交按鈕,您可以使用

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

試試這個:

HTML:

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

CSS:

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

Saludos!

0

您可以在輸入元素上方插入文本。我使用標籤元素爲這項工作。您可以使用CSS代碼編輯標籤元素位置。

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

+0

這不是OP要求的。他想要在背景中顯示圖像,並在前景中顯示文字。 –

相關問題