在 HTML 中的按钮中嵌入图像

当前位置：主页 > 学无止境 > WEB前端 > HTML >

Vue React JavaScript Angular CSS HTML

在 HTML 中的按钮中嵌入图像

作者：迹忆客最近更新：2023/03/27 浏览次数：

本文将讨论在 HTML 中的 <button> 元素中嵌入图像的几种方法。表示在 HTML 按钮内修复或设置图片。

使用 `<button>` 标签内的 `<img>` 标签在 HTML 按钮中嵌入图像

这个 <img> 标签用于在 HTML 页面上嵌入图像。图像并没有直接放入网页中；图像通过给定的路径链接到网页。此标签为特定图像生成一个空间。该标签有两个必需的属性，即 src 和 alt。我们可以使用 HTML 中的 <button> 标签创建一个可点击的 HTML 按钮。将 <img> 标签放置在 <button> 标签内会创建一个可点击的 HTML 按钮，其中嵌入了图像。

例如，在 HTML 正文中，打开 <button> 标记。将 type 指定为 button。然后，打开 <img> 标签并在 src 属性中指定图像 URL。接下来，将 height 和 width 分别设置为 80 和 100。最后，在以下几行中关闭所有先前打开的标签。

在下面的示例中，我们创建了一个 <button> 元素并在其中插入了一个图像以嵌入按钮内。我们使用 URL 缩短器将图像的短 URL 放在 src 标签中。因此，可以在 HTML 中创建带有图像的按钮。

示例代码：

<body>
<button type="button"> <img src="/img/jiyik/logo.png" height ="90" width="480" /></button>
</body>

使用 `<input type="image">` 标签在 HTML 按钮中嵌入图像

<input> 标签指定了一个输入字段，我们可以在其中输入我们的数据。HTML 中允许使用多种输入类型和控件组件。其中一些是 <input type="button">、<input type="color">、<input type="email">、<input type="text">。我们可以将 type 属性设置为 image 并设置 src 以在输入类型中嵌入图像。它将起到按钮的作用。

例如，在 HTML 正文中，打开 <input> 标记并将 type 指定为 image。然后，在 src 属性中输入图像 URL。接下来，编写 style 属性并将 border 设置为 double。此外，将高度和宽度添加为 80 和 170。然后，关闭输入标签和所有之前打开的标签。

下面的示例说明了在 HTML 页面上嵌入图像的方法。<type="image"> 标签指定我们在工作中插入或使用图像。我们使用内联 CSS 来设置图像的边框、高度和宽度。我们这样做是为了使图像看起来更像一个按钮。值 double 指定在图像按钮外使用双边框。高度和宽度帮助图像进入一个确定的大小。如果我们不指定图像的高度和宽度，加载图像时页面可能会闪烁。通过这种方式，我们可以在 HTML 按钮中嵌入图像。

示例代码：

<input type="image" src="/img/jiyik/logo.png" style="border: double;" height="90" width="480"/>

上一篇：在 HTML 按钮中创建链接

下一篇：在 HTML 中居中表单

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享