HTML网页怎么添加背景图片_HTML网页添加背景图片的完整步骤-html教程-PHP中文网

HTML网页怎么添加背景图片_HTML网页添加背景图片的完整步骤

絕刀狂花

发布： 2025-09-26 10:08:01

原创

896人浏览过

可通过内联样式、内部CSS或外部CSS文件为网页添加背景图片，推荐使用外部CSS便于维护；2. 需注意路径正确、图片优化与适配，设置background-size: cover和备用背景色以提升显示效果。

html网页怎么添加背景图片_html网页添加背景图片的完整步骤

给HTML网页添加背景图片可以让页面看起来更生动、美观。实现方法简单，主要通过CSS来完成。下面介绍几种常用且有效的添加背景图片的方式。

1. 使用内联样式添加背景图片

可以直接在HTML标签中使用style属性设置背景图，适合单页或测试用途。

示例代码：

说明：
- url('bg.jpg')：括号内为图片路径，可以是相对路径或绝对URL。
- background-repeat: no-repeat：防止图片重复平铺。
- background-size: cover：让图片自适应屏幕大小，完全覆盖背景。

2. 使用内部CSS样式表

将CSS写在HTML的<head>部分，适用于单个页面。

立即学习“前端免费学习笔记（深入）”；

示例代码：

<head>
  <style>
    body {
      background-image: url('images/background.jpg');
      background-size: cover;
      background-attachment: fixed;
    }
  </style>
</head>

说明：
- background-attachment: fixed：背景图固定，滚动内容时背景不动，增强视觉效果。

3. 使用外部CSS文件（推荐）

将样式写入单独的CSS文件，HTML中引入，便于维护和复用。

Alkaid.art

专门为Phtoshop打造的AIGC绘画插件

153

查看详情

CSS文件（如 style.css）：

body {
  background-image: url('images/bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  margin: 0;
  height: 100vh;
}

HTML中引入：

这种方式结构清晰，适合多页面项目。