如何把一个JPG或PNG图像放入HTML中的按钮

问题描述：

我想要一个带有图片的按钮。我使用这个：

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

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

但它不显示图像。我想让整个按钮成为图像。

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

答

它应该是

It should be

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

所以图片而不是提交。它仍然是一个点击提交的按钮。

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

如果您的图片大于显示的按钮，假设图像是200x200像素;添加到您的样式表：

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:

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

请注意，像这样调整图片大小可能不会产生理想的效果;如果例如你的图像比你想要显示的图像小得多，你会看到单个像素;另一方面，如果它更大，则会浪费用户的宝贵带宽。因此，将图片本身调整为实际大小比通过样式表重新调整大小更可取！

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!

如何把一个JPG或PNG图像放入HTML中的按钮

相关推荐