將圖像嵌入<button>元素

我試圖在HTML中的<button>元素上顯示png圖像。該按鈕與圖像尺寸相同，並顯示圖像，但由於某些原因不在中心 - 因此無法看到所有圖像。換句話說，圖片的右上角看起來像位於按鈕的中心，而不是按鈕的右上角。將圖像嵌入<button>元素

這是HTML代碼：

<button id="close" class="closing" onClick="javascript:close_clip()"><img src="icons/close.png" /></button>

更新：
實際發生的，我想，是保證金的問題。我得到了一個兩個像素的邊距，所以背景圖像會從按鈕中消失。該按鈕和圖像的大小相同，這是唯一20px，所以很noticable ......我試過margin:0，padding:0，但它並沒有幫助...

來源

2011-12-30 Amit Hagin

對我來說，它的功能非常完美......您在遇到這種情況的時候，這是什麼情況？可能發佈幾行代碼？ – 2011-12-30 20:07:28

你可以在一個活的網站上重現這個，比如[JS Fiddle]（http://jsfiddle.net/），讓我們看*發生了什麼事情？ – 2011-12-30 20:07:44

你可以使用輸入型圖像。

<input type="image" src="http://example.com/path/to/image.png" />

它作爲一個按鈕，可以附加到它的事件處理程序。

或者，您可以使用CSS來設置背景圖像的按鈕樣式，並適當地設置邊框，邊距等。

<button style="background: url(myimage.png)" ... />

來源

2011-12-30 20:06:41

...並且不需要JavaScript來提交表單。 – ComFreek 2011-12-30 20:10:04

-1：「*應該*」的術語過於強烈，因爲這不是真正的'「。你爲什麼不建議CSS？ – 2011-12-30 20:11:20

@madmartigan編輯。 – 2011-12-30 20:15:00

試試這個

<input type="button" style="background-image:url('your_url')"/>

來源

2011-12-30 20:07:23

-5

按鍵不直接支持的圖像。而且你正在做的方式是鏈接（）

圖像添加了使用background-image屬性按鈕風格

您還可以使用標籤

例如指定重複和其他屬性：如果圖像是一塊語義數據的（如

<button style="background-image:url(myImage.png)">

和平

來源

2011-12-30 20:07:38 proctr

您的回答不正確，官方[文檔]（https://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html）表示它是允許。 – biphobe 2016-11-07 10:52:41

：加入到一個按鈕基本圖像將有這樣的代碼例如配置文件圖片），然後在您的<button>中使用<img>元素，並使用CSS調整<img>的大小。如果圖像只是一種使按鈕視覺上令人愉悅的方式，請使用CSS background-image來設置<button>的樣式（並且不要使用<img>）。

演示：http://jsfiddle.net/ThinkingStiff/V5Xqr/

HTML：

<button id="close-image"><img src="http://thinkingstiff.com/images/matt.jpg"></button> 
<button id="close-CSS"></button>

CSS：

button { 
    display: inline-block; 
    height: 134px; 
    padding: 0; 
    margin: 0; 
    vertical-align: top; 
    width: 104px; 
} 

#close-image img { 
    display: block; 
    height: 130px; 
    width: 100px; 
} 

#close-CSS { 
    background-image: url('http://thinkingstiff.com/images/matt.jpg'); 
    background-size: 100px 130px; 
    height: 134px; 
    width: 104px; 
}

輸出：

enter image description here

來源

2011-12-30 20:17:40 ThinkingStiff

嘿，看起來不錯，介意如果我借用你的代碼？ :) – 2011-12-30 20:31:58

@Madmartigan當然不是！去吧。 :) – ThinkingStiff 2011-12-30 20:37:26

@ThinkingStiff''元素？我認爲你的意思是''在你的文字中;） – ComFreek 2011-12-30 21:00:25

在項目中添加具有圖像名稱的新文件夾。將一些圖像放入Images文件夾中。然後它會正常工作。

<input type="image" src="~/Images/Desert.jpg" alt="Submit" width="48" height="48">

來源

2016-11-09 09:08:49 Parameswaran

試試這個代碼：

<button onclick="myFunction()"><img src="your image name here.png"</button>

它的工作對我罰款。

來源

2017-09-17 22:03:26

將圖像嵌入<button>元素

回答

相關問題