如何將jpg或png圖像放入HTML按鈕中

Question

我想要一個帶有圖像的按鈕。 我用這個：

<input type="submit" name="submit" src="images/stack.png" /> 

但它沒有顯示圖像。 我希望整個按鈕成為圖像。

Answer 1

它應該是

<input type="image" id="myimage" src="[...]" />

所以“形象”而不是“提交”。 它仍然是一個點擊提交的按鈕。

如果您的圖像大於顯示的按鈕; 假設圖像是200x200像素; 將其添加到樣式表：

#myimage {
    height: 200px;
    width: 200px;
}

或直接在按鈕標簽中：

<input type="image" id="myimage" style="height:200px;width:200px;" src="[...]" />

但請注意，像這樣調整圖像大小可能無法產生理想的結果; 如果您的圖像比您想要的圖像小得多，您將看到單個像素; 如果另一方面它更大，你浪費了寶貴的用戶帶寬。 因此，將圖片本身調整為實際尺寸比通過樣式表重新縮放更可取！

Answer 2

您可以使用CSS設置按鈕樣式或使用圖像輸入。 此外，您可以使用支持內聯內容的button元素。

<button type="submit"><img src="/path/to/image" alt="Submit"></button>

Answer 3

使用<button>元素代替<input type=button />

Answer 4

你可以像這樣使用一些內聯CSS

<input type="submit" name="submit" style="background: url(images/stack.png); width:100px; height:25px;" />

應該做魔術，你也可以做邊界：沒有; 擺脫標准邊界。

Answer 5

你也可以試試這樣的東西

<input type="button" value="text" name="text" onClick="{action}; return false" class="fwm_button">

和CSS類

.fwm_button {
   color: white;
   font-weight: bold;
   background-color: #6699cc;
   border: 2px outset;
   border-top-color: #aaccff;
   border-left-color: #aaccff;
   border-right-color: #003366;
   border-bottom-color: #003366;
 }

這里給出一個例子

Answer 6

這可能適合你，試試看它是否有效：

<input type="image" src="/library/graphics/cecb2.gif">

Answer 7

<input type= "image" id=" " onclick=" " src=" " />

有用。

Answer 8

<a href="#">
        <img src="p.png"></img>
    </a>