HTML5显示图片有两种主流方式：一是用标签通过src嵌入，支持语义化、alt文本和懒加载；二是用CSS的background-image设置装饰性背景，不参与文档流；二者可混合使用以兼顾可访问性与视觉效果。

如果您希望在网页中显示图片，HTML5 提供了两种主流方式：一种是使用 标签通过 src 属性嵌入图像，另一种是在 CSS 中通过 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; 居中对齐。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

三、混合应用：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 响应头，否则部分浏览器拒绝渲染。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！