如何在 HTML 元素中正确显示背景图片或内嵌图片-html教程-PHP中文网

如何在 HTML <input> 元素中正确显示背景图片或内嵌图片元素中正确显示背景图片或内嵌图片 " />

标签默认不支持通过 background-image 显示图片（除非正确设置样式），若想直接显示图片，应使用 type="image" 并配合 src 属性；而 type="text" 输入框需依赖 CSS 的 background-image 实现图标装饰，此时必须确保 padding 足够、尺寸合理且无遮挡。

`` 标签默认不支持通过 `background-image` 显示图片（除非正确设置样式），若想直接显示图片，应使用 `type="image"` 并配合 `src` 属性；而 `type="text"` 输入框需依赖 css 的 `background-image` 实现图标装饰，此时必须确保 padding 足够、尺寸合理且无遮挡。

在 HTML 开发中，常有人误以为给设置 background-image 就能像一样直观显示图片，但实际效果不佳往往源于几个关键细节被忽略。

首先，明确两种主流方案的适用场景：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

✅ 方案一：使用（推荐用于可点击图片按钮）
该类型本质是提交按钮的图像化变体，浏览器会自动渲染 src 指定的图片，并支持点击提交表单。注意：它不支持 placeholder、onkeyup 等文本输入专属属性，因此不能直接替代搜索框。

<!-- 正确：显示图片并可作为提交按钮 -->
<input type="image" src="http://aisgrosurvey01/images/logo.jpg" alt="Logo" width="64" height="64" id="logoButton">

⚠️ 你原代码中混用了 type="text" 和 background-image，又试图保留 onkeyup 和 placeholder —— 这本身逻辑合理，但失败原因并非 CSS 错误，而是background-image 在上生效需满足前提条件。

✅ 方案二：为添加背景图（适用于搜索框图标等装饰场景）
你的 CSS 基本正确，但以下几点极易导致图片“不可见”：

? 缺少 background-size 或图片尺寸过大：若图片远超 input 高度，可能被裁剪。建议显式设置：

#myInput1 {
  background-size: 20px 20px; /* 控制图标大小 */
  background-origin: content-box;
  background-clip: content-box;
}

? padding-left 不足：你已设 padding: 12px 20px 12px 40px，其中 40px 是为预留图标空间，但需确认 background-position: 10px 12px 中的 10px 是相对于 padding box（默认）还是 content box。更稳妥写法：
```
background-position: 12px center; /* 垂直居中，水平距左边缘12px */
```
? 路径或跨域问题：确保 http://aisgrosurvey01/images/logo.jpg 可直接在浏览器地址栏访问（无 404/跨域拦截）。本地开发时，HTTP 协议可能被现代浏览器阻止，建议改用相对路径或 https。

? 终极调试建议：
在开发者工具中检查该 input 元素的 Computed Styles，确认 background-image 是否解析成功；右键“Open in New Tab”验证图片 URL 是否有效；临时添加 border: 1px solid red 查看元素真实尺寸，排除因 width: 36% 导致容器过窄而挤压背景图。

总结：不是，不能靠 src 属性显示内容图（除非 type="image"）；文本框的图标必须走 CSS background-* 系列属性，且需协同控制尺寸、定位与盒模型。选择方案前，请先明确需求——是“带图的按钮”还是“带图标的输入框”。