如何在HTML中将JPG或PNG图像放入按钮？

Question

如何在HTML中将JPG或PNG图像放入按钮？

19

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

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

但它没有显示图片。我想要整个按钮都是图片。

- Rizvan

8个回答

16

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

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

- nikc.org

2

"<button>元素比<input>元素更容易进行样式设置。您可以添加内部HTML内容（例如<em>、<strong>甚至<img>），并利用:after和:before伪元素实现复杂的呈现效果，而<input>只接受文本值属性。" [来源：MDN] - ruhong

6

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

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

应该是可以做到的，您可能想要添加border:none;来去除标准边框。

- MartinElvar

1

或者在你的CSS样式表文件中创建一个类并使用它; o) - Neil Knight

1

如果我使用你的代码，它只会取得我的图像的一部分而不是整个图像，我已经尝试使用按钮的宽度和高度...但还是没有用。 - Rizvan

1

这需要很多时间，但你们都要努力尝试...谢谢伙计:) - Rizvan

5

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

- eas

3

你也可以尝试这样做：

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

这里提供一个示例，点击这里查看。

- GustyWind

1

但问题是如何将图像放在按钮上（或者说，如何使用图像作为按钮）。 - nnnnnn

2

这可能对你有用，试一试看是否有效：

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

- Royi Namir

0

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

它有效。

- vikas agrahari

-1

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

- Hammad Hassan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- codeling · Accepted Answer

应该是这样的

<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="[...]" />

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