给网页设置背景，是做HTML5页面时绕不开的第一课。无论是个人博客还是企业官网，背景色和背景图直接决定了页面的第一观感。很多初学者容易犯的错误是直接在<body>标签上堆样式，或者把background的几个子属性混着乱写，结果图片要么平铺得满屏都是，要么拉伸变形严重。这篇文章从颜色背景讲起，再到图片背景的各种控制方式，最后聊一些进阶技巧，把html5设置背景这件事彻底讲透。
一、用background-color设置纯色背景
设置纯色背景是最简单也是最常用的方式。background-color可以写在任何元素上，但页面级的背景通常写在body或者html标签的选择器里。颜色的写法有四种：颜色名称、十六进制、rgb和rgba，日常开发中十六进制用得最多。
值得一提的是rgba写法，前三个数字表示红绿蓝的取值，第四个数字表示透明度，取值范围是0到1。比如想让背景是半透明的黑色遮罩效果，就可以用rgba(0, 0, 0, 0.5)。这在做弹窗背景、导航栏半透明效果时非常实用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景颜色示例</title>
<style>
body {
/* 十六进制写法 */
background-color: #f0f2f5;
}
.header {
/* rgba写法，半透明黑色 */
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 20px;
}
</style>
</head>
<body>
<div class="header">这是一个半透明导航栏</div>
</body>
</html>还有一个容易忽略的细节：如果只给body设置了背景，而内容没有撑满整个屏幕，有些浏览器下背景可能不会铺满底部。稳妥的做法是给html和body同时设置背景色，或者给body设置min-height: 100%;，这样能保证短页面也有完整背景。
二、用background-image设置图片背景
图片背景通过background-image属性实现，写法是background-image: url('图片路径');。这里有个新手常踩的坑：默认情况下背景图片会同时在水平和垂直两个方向重复平铺，直到铺满整个元素。如果图片尺寸比容器小，你会看到同一张图密密麻麻排成一片。
所以实际开发中，background-image几乎总是和background-repeat搭配使用。background-repeat: no-repeat;表示不平铺，只显示一次。另外还有repeat-x和repeat-y，分别表示只在水平或垂直方向平铺，做横向条纹背景时很常用。
图片显示一次之后，它显示在哪个位置、占多大尺寸，就需要background-position和background-size来控制了。position默认在左上角，可以用center、top、bottom这些关键字，也可以用像素或百分比精确指定。size属性则决定了图片的缩放方式。
<style>
.banner {
width: 100%;
height: 400px;
/* 简写形式：颜色 图片 平铺 位置 */
background: #333 url('images/banner.jpg') no-repeat center;
/* 控制图片缩放，等比放大铺满容器 */
background-size: cover;
}
</style>background简写形式可以把颜色、图片、平铺方式、定位一次性写完，代码更紧凑，这是实际项目里的主流写法。需要注意的是简写中各个子属性的顺序可以灵活调整，但图片路径必须在url()里写正确，路径是相对于CSS文件的位置而不是HTML文件，这一点经常导致背景图显示不出来。
三、cover和contain的区别与全屏背景实现
background-size的两个关键字值最容易被混淆。cover的含义是等比缩放图片直到完全覆盖容器，多出来的部分会被裁掉，优点是容器不会留白，缺点是图片可能被裁切不完整。contain则是等比缩放直到图片完整装进容器，图片一定完整显示，但容器可能露出空白区域。
做全屏背景也就是常说的响应式大图背景时，几乎都选cover。把背景设置在body上，再配合center定位，无论窗口怎么缩放，图片都会保持比例铺满屏幕。来看一个完整的全屏背景例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全屏背景示例</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: url('images/bg.jpg') no-repeat center center;
background-size: cover;
/* 背景固定，滚动页面时背景不动 */
background-attachment: fixed;
}
.content {
color: #fff;
padding: 40px;
}
</style>
</head>
<body>
<div class="content">全屏背景页面内容</div>
</body>
</html>这里额外加了background-attachment: fixed;，它的作用是把背景固定在视口上，滚动内容时背景保持不动，能做出很不错的视差观感。不过要注意，移动端部分浏览器对fixed支持不佳，如果发现手机上背景滚动异常，可以针对小屏设备取消这个属性。
四、渐变背景与多重背景等进阶用法
除了纯色和图片，CSS还支持直接用代码画出渐变背景。线性渐变的写法是linear-gradient(方向, 颜色1, 颜色2)，比如从上到下由深蓝过渡到浅蓝，不需要任何图片文件，加载速度快还能随意改色。径向渐变则用radial-gradient，从中心向外扩散，适合做按钮高光或聚光效果。
<style>
.gradient-box {
height: 200px;
/* 从上到下的蓝色渐变 */
background: linear-gradient(to bottom, #1e3c72, #2a5298);
}
.multi-bg {
height: 200px;
/* 多重背景：图片叠在渐变之上，逗号分隔，先写的在上层 */
background:
url('images/icon.png') no-repeat center,
linear-gradient(to right, #ff7e5f, #feb47b);
}
</style>CSS3允许在一个元素上叠加多层背景，多个背景之间用逗号隔开，写在最前面的层级最高。这个特性非常灵活，比如底层放一张渐变，上层放一张带透明通道的装饰图案，组合出丰富的视觉效果，而且只需要一个元素就能完成，不用再嵌套多余的div。
最后补充一个实用小技巧：如果希望背景图上能放清晰的文字，可以在图片上再叠一层半透明黑色，也就是两层背景叠加，第一层是linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6))，第二层是背景图。这样文字和图片的对比度会明显提升，阅读体验好很多，这是很多官网首页大图的通用做法。掌握这些属性之后，html5页面的背景设置基本就没有能难住你的场景了。
html5背景设置CSS background网页背景颜色修改时间：2026-09-05 10:34:36