javascript 如何将jpg或png图像放入HTML中的按钮

wribegjk  于 2023-03-06  发布在  Java
关注(0)|答案(9)|浏览(155)

我想要一个有图像的按钮。我正在使用这个:

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

但是它没有显示图像。我希望整个按钮都是图像。

2mbi3lxu

2mbi3lxu1#

应该是

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

所以"图像"而不是"提交"。它仍然是一个点击提交的按钮。
如果您的图像比显示的按钮大;假设图像是200x200像素添加这个到你的样式表:

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

或者直接在按钮标签中:

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

然而,注意,像这样调整图像大小可能不会产生理想的结果;例如,如果您的图像比您希望显示的图像小得多,您将看到单个像素;另一方面,如果图片太大,你就浪费了用户宝贵的带宽。2因此,将图片本身调整到实际大小要比通过样式表调整图片大小更好!

9w11ddsr

9w11ddsr2#

你可以使用CSS或者图像输入来设计按钮的样式,另外你可以使用button元素来支持内联内容。

<button type="submit"><img src="/path/to/image" alt="Submit"></button>
hkmswyz6

hkmswyz63#

你可以像这样使用一些内联CSS

<input type="submit" name="submit" style="background: url(images/stack.png); width:100px; height:25px;" />

要做魔术,你也可以做一个边界:无;来摆脱标准的边界。

5vf7fwbs

5vf7fwbs4#

使用<button>元素代替<input type=button />

l3zydbqr

l3zydbqr5#

你也可以试试这样的方法

<input type="button" value="text" name="text" onClick="{action}; return false" class="fwm_button">

和CSS类

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

here给出了一个示例

rvpgvaaj

rvpgvaaj6#

这可能对你有用,试试看它是否有效:

<input type="image" src="/library/graphics/cecb2.gif">
uqdfh47h

uqdfh47h7#

<input type= "image" id=" " onclick=" " src=" " />

它起作用了。

63lcw9qa

63lcw9qa8#

你只需要创建一个包含图片的链接。一个不错的方法可以在这里找到:Image in Button

wgmfuz8q

wgmfuz8q9#

<a href="#">
        <img src="p.png"></img>
    </a>

相关问题