Nhúng hình ảnh vào một yếu tố <button>

Question

Tôi đang cố gắng hiển thị hình ảnh png trên một phần tử <button> trong HTML. Nút có cùng kích thước với hình ảnh và hình ảnh được hiển thị nhưng vì một lý do nào đó không ở giữa - vì vậy không thể nhìn thấy tất cả. Nói cách khác, có vẻ như góc trên cùng bên phải của hình ảnh nằm ở giữa nút và không phải ở góc trên cùng bên phải của nút.

Đây là mã HTML:

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

Cập nhật:
Điều gì thực sự xảy ra, tôi nghĩ, là một vấn đề lợi nhuận. Tôi nhận được một lề hai pixel, vì vậy hình nền sẽ biến mất khỏi nút. Nút và hình ảnh có cùng kích thước, chỉ có 20px, vì vậy rất đáng chú ý ... Tôi đã thử margin:0, padding:0, nhưng nó không giúp được ...

Answer 1

Bạn có thể sử dụng hình ảnh loại đầu vào.

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

Nút này hoạt động như một nút và có thể có trình xử lý sự kiện gắn liền với nó.

Hoặc, bạn có thể sử dụng css để tạo kiểu cho nút của bạn bằng hình nền và đặt đường viền, lề và các hình tương tự một cách thích hợp.

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

Answer 2

thử này

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

Answer 3

Buttons không trực tiếp hỗ trợ hình ảnh. Hơn nữa theo cách bạn đang làm là cho các liên kết()

hình ảnh được bổ sung qua các nút bằng thuộc tính background-image trong phong cách

bạn cũng có thể chỉ định lặp đi lặp lại và các tài sản khác sử dụng thẻ

Ví dụ : một hình ảnh cơ bản thêm vào một nút sẽ có mã này:

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

Hòa bình

Answer 4

Nếu hình ảnh là một phần dữ liệu ngữ nghĩa (như ví dụ: ảnh hồ sơ), sau đó sử dụng phần tử <img> bên trong <button> và sử dụng CSS để đổi kích thước <img>. Nếu hình ảnh chỉ là một cách để tạo nút dễ nhìn, hãy sử dụng CSS background-image để tạo kiểu cho <button> (và không sử dụng <img>).

Demo: 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; 
} 

Output:

Answer 5

Thêm thư mục mới với tên Hình ảnh trong dự án của bạn. Đặt một số hình ảnh vào thư mục Hình ảnh. Sau đó, nó sẽ làm việc tốt.

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

Answer 6

Hãy thử mã này:

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

Nó hoạt động tốt đối với tôi.