本教程共 44 篇 · 第 18 篇 · 更新于 2026-07-29 · 约 10 分钟阅读

18. 背景样式

本节目标：掌握 background 系列属性的用法，能灵活设置背景色、背景图、重复方式和定位。

background-color —— 背景色

最简单的背景属性，给元素设置纯色背景。

.box {
    background-color: #4CAF50; /* 绿色背景 */
}

/* 所有颜色表示法都支持 */
.color-examples {
    background: red;
    background: #ff0000;
    background: rgb(255, 0, 0);
    background: hsl(0, 100%, 50%);
}

背景色会填充整个元素区域，包括 padding 和 border 下方。

background-image —— 背景图

用图片作为元素背景，默认会平铺整个区域。

.hero {
    background-image: url('banner.jpg');
}

背景图和 img 标签的区别：背景图不影响文档流，不能右键保存，SEO 不友好。适合装饰性图片。

background-repeat —— 控制重复

默认情况下，背景图会水平和垂直重复平铺。

.bg {
    background-image: url('pattern.png');
    background-repeat: no-repeat; /* 不重复，只显示一次 */
}

常用取值：

值	效果
`repeat`	默认，双向平铺
`repeat-x`	只在水平方向平铺
`repeat-y`	只在垂直方向平铺
`no-repeat`	不平铺，只显示一次

/* 水平渐变背景条 */
.gradient-bar {
    background-image: url('gradient.png');
    background-repeat: repeat-x; /* 横向平铺一条渐变 */
}

background-position —— 背景定位

当背景图不重复时，可以用 background-position 控制图片位置。

.bg {
    background-image: url('logo.png');
    background-repeat: no-repeat;
    background-position: right top; /* 右上角 */
}

常用取值：

关键词：left、center、right、top、bottom
百分比：50% 50%（居中）
精确值：20px 10px

/* 最常用的居中写法 */
.centered {
    background-position: center center;
}

background-attachment —— 固定背景

控制背景图是否随页面滚动。

.parallax {
    background-image: url('mountain.jpg');
    background-attachment: fixed; /* 背景固定，内容滚动 */
}

值	效果
`scroll`	默认，背景随元素滚动
`fixed`	背景固定在视口，不随滚动条移动
`local`	背景随元素内容滚动

简写属性 background

把所有背景属性合并到一行，代码更简洁。

/* 分开写 */
.full-bg {
    background-color: #ffffff;
    background-image: url('bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

/* 简写 */
.full-bg {
    background: #ffffff url('bg.jpg') no-repeat center fixed;
}

简写顺序（建议）：color image repeat attachment position

简写时不需要全部属性都写，写你需要的就行。没写的属性会使用默认值。

实战：全屏背景图

<!DOCTYPE html>
<html lang="zh">
<head>
    <style>
        .hero-section {
            height: 100vh; /* 占满整个视口高度 */
            background-image: url('https://picsum.photos/1920/1080');
            background-repeat: no-repeat;
            background-position: center;
            background-attachment: fixed;
            /* 或使用简写： */
            /* background: url('bg.jpg') no-repeat center fixed; */
            
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
        }
        .hero-content h1 {
            font-size: 48px;
            margin: 0;
        }
        .hero-content p {
            font-size: 20px;
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <section class="hero-section">
        <div class="hero-content">
            <h1>欢迎访问</h1>
            <p>一个简洁的欢迎页面</p>
        </div>
    </section>
</body>
</html>

实战：CSS Sprites 精灵图

把多张小图标合并成一张大图，通过 background-position 显示不同部分，减少 HTTP 请求。

.icon {
    width: 32px;
    height: 32px;
    background-image: url('icons.png');
    background-repeat: no-repeat;
}

.icon-home { background-position: 0 0; }
.icon-mail { background-position: -32px 0; }
.icon-user { background-position: -64px 0; }

实战：背景色透明度

需要半透明背景但不影响文字可读性时，用 RGBA。

.overlay {
    /* 方法1：用 rgba 背景色 */
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑 */
    color: white;
}

/* 错误示范：opacity 会影响子元素 */
.wrong-overlay {
    background-color: #000000;
    opacity: 0.5; /* 文字也会变透明！ */
}

opacity 影响整个元素（包括子元素），rgba 只影响背景色。

背景属性速查表

属性	作用	常用值
`background-color`	背景颜色	颜色值
`background-image`	背景图片	`url(...)`
`background-repeat`	是否重复	repeat / no-repeat / repeat-x / repeat-y
`background-position`	图片位置	center / right top / 50% 50%
`background-attachment`	滚动行为	scroll / fixed / local
`background`	简写属性	以上任意组合

小结

background-color 设置纯色背景
background-image 设置背景图，默认平铺
background-repeat 控制是否重复
background-position 控制图片位置
background-attachment 控制滚动行为
background 简写一行搞定所有属性
需要透明背景用 rgba，不要用 opacity