How to put a jpg or png image into a button in HTML

问题:

I want a button with an image in it. I am using this:

But it does not show the image. I want the whole button to be the image.

回答1:

It should be

So "image" instead of "submit". It will still be a button which submits on click.

If your image is bigger than the button which is shown; let's say the image is 200x200 pixels; add this to your stylesheet:

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

or directly in the button tag:

Note however that resizing the image like this might not yield ideal results; if e.g. your image is much smaller than you want it to be shown, you will see the single pixels; if on the other hand it is much bigger, you are wasting precious bandwidth of your users. So resizing the picture itself to the actual size is preferrable over rescaling via stylesheets!

回答2:

You can style the button using CSS or use an image-input. Additionally you might use the button element which supports inline content.

回答3:

Use element instead of

回答4:

You can use some inline CSS like this

Should do the magic, also you may wanna do a border:none; to get rid of the standard borders.

回答5:

you can also try something like this as well

and CSS class

.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;  } 

An example is given here

回答6:

This may work for you, try it and see if it works:

回答7:

it works.

回答8:

文章来源: How to put a jpg or png image into a button in HTML