如何将jpg或png图像放入HTML中的按钮中
如何将jpg或png图像放入HTML中的按钮中
提问于 2011-12-13 18:58:54
我想要一个有图像的按钮。我使用的是：
<input type="submit" name="submit" src="images/stack.png" /> 但它不显示图像。我希望整个按钮都是图像。
回答 8
Stack Overflow用户
回答已采纳
发布于 2011-12-13 19:00:19
它应该是
<input type="image" id="myimage" src="[...]" />所以"image“而不是"submit”。它仍然是一个在点击时提交的按钮。
如果您的图像比所显示的按钮大；假设图像为200x200像素；请将以下内容添加到样式表中：
#myimage {
height: 200px;
width: 200px;
}或者直接在按钮标记中：
<input type="image" id="myimage" style="height:200px;width:200px;" src="[...]" />但是请注意，像这样调整图像大小可能不会产生理想的结果；例如，如果图像比您希望显示的图像小得多，您将看到单像素；如果图像大得多，您正在浪费用户的宝贵带宽。因此，将图片本身的大小调整为实际大小要比通过样式表重新缩放要好！
Stack Overflow用户
发布于 2011-12-13 21:56:44
您可以使用CSS或图像输入来设置按钮的样式。此外，还可以使用支持内联内容的button元素。
<button type="submit"><img src="/path/to/image" alt="Submit"></button>Stack Overflow用户
发布于 2011-12-13 19:02:23
您可以像这样使用一些内联CSS
<input type="submit" name="submit" style="background: url(images/stack.png); width:100px; height:25px;" />应该做魔术，你也可以做一个边框:无；以摆脱标准的边框。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8488005
复制相关文章
相似问题