HTML5 显示图片有两种主流方式：一是用标签通过 src 嵌入，支持语义化、alt 文本和懒加载；二是用 CSS 的 background-image 设置装饰性背景，不参与文档流；二者可混合使用以兼顾可访问性与视觉效果。
如果您希望在网页中显示图片，HTML5 提供了两种主流方式：一种是使用 标签通过 src 属性嵌入图像，另一种是在 CSS 中通过 background-image 属性将图片设置为元素的背景。以下是这两种应用方式的具体操作步骤：
一、使用 ![html5 怎么应用图片_html5 用 img 标签 src 引图片或用 background-image 应用【应用】]()
标签通过 src 属性嵌入图片
该方式适用于需要语义化表达、可被屏幕阅读器识别、支持替代文本（alt）且需独立加载和交互的图像内容。图片作为文档流中的内联元素，会占据页面布局空间。
1、在 HTML 文件中插入 标签，并确保其为自闭合标签。
2、为 src 属性指定图片的相对路径或绝对 URL，例如：src=”images/photo.jpg” 或 src=”https://example.com/logo.png”。
立即学习 “ 前端免费学习笔记（深入）”；
3、为 alt 属性提供简洁准确的描述性文字，例如：alt=” 公司总部大楼外景 ”。
4、可选地添加 width 和 height 属性以预设尺寸，或使用 CSS 控制大小，避免页面重排。
二、使用 background-image 在 CSS 中设置元素背景图
该方式适用于装饰性图像、响应式背景覆盖、多层叠加背景或需配合 伪元素 使用的场景。图片不参与文档语义结构，也不影响页面流布局，仅作为视觉修饰存在。
1、选择一个块级或行内块级元素（如
2、在 CSS 中为目标元素添加 background-image: url(“images/banner.jpg”);，路径格式与 src 一致。
3、添加 background-size: cover; 或 background-size: contain; 控制缩放行为，防止图片拉伸失真。
4、添加 background-repeat: no-repeat; 防止图片平铺，并用 background-position: center center; 居中对齐。
三、混合应用：img 标签与 background-image 协同使用
当需要兼顾语义化与视觉增强时，可在 外层包裹容器，用 background-image 添加遮罩层、渐变蒙版或装饰性纹理，而原图仍由 src 加载并保有可访问性。
1、编写结构：外层
。2、在 CSS 中为 .image-container 设置 background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(“overlay-pattern.png”);。
3、设置 .image-container {position: relative;}，并为 img 添加 position: relative; z-index: 1; 确保图片位于背景之上。
4、为 .image-container 指定 background-blend-mode: multiply; 实现图层混合效果（需 浏览器 支持）。
四、路径与资源加载注意事项
无论采用哪种方式，图片路径解析均基于当前 HTML 文件或 CSS 文件的位置，而非浏览器地址栏 URL。错误的路径会导致图片无法加载，且 会显示断链图标，background-image 则静默失效。
1、使用相对路径时，确认图片文件实际存放位置与引用路径匹配，例如 HTML 在根目录，图片在 /assets/images/icon.svg，则写为 src=”assets/images/icon.svg”。
2、在 CSS 文件中引用图片，路径应相对于 CSS 文件所在目录，而非 HTML 文件。
3、对重要图片资源，建议在 中启用 loading=”lazy” 属性实现原生 懒加载，但 background-image 不支持此属性。
4、检查服务器是否正确配置 MIME 类型，PNG、JPG、GIF、SVG、WEBP 等格式必须返回对应 Content-Type 响应头，否则部分浏览器拒绝渲染。
