CSS 背景：background-color、background-image

网页设计中，背景是最基础的视觉元素之一。CSS 提供了两个核心属性来控制背景：background-color 用于设置纯色背景，background-image 用于添加图像背景。掌握这两个属性，能够为网页打下美观的视觉基础。

1 基础概念

CSS 背景属性作用于元素的内容区域以及内边距（padding）区域，不覆盖元素的边框（border）区域。理解这一点对于布局和视觉设计至关重要。

所有背景属性都可以使用简写属性 background 一次性声明，但在实际开发中，分别设置各个属性可以提高代码的可读性和可维护性。

2 background-color：背景颜色

2.1 基本用法

background-color 属性用于设置元素的纯色背景，支持多种颜色格式的声明方式。

/* 十六进制颜色 */
.box-1 {
    background-color: #ff6b6b;
}

/* RGB 颜色 */
.box-2 {
    background-color: rgb(255, 107, 107);
}

/* RGBA 颜色（带透明度） */
.box-3 {
    background-color: rgba(255, 107, 107, 0.5);
}

/* 颜色名称 */
.box-4 {
    background-color: tomato;
}

/* HSL 颜色 */
.box-5 {
    background-color: hsl(0, 100%, 70%);
}

2.2 透明背景

background-color: transparent 可以让元素背景完全透明，这在层叠布局中非常实用。例如，创建一个覆盖在其他元素之上的提示框时，提示框主体需要透明背景，而内部文字区域需要有色背景。

.overlay {
    background-color: transparent;
}

2.3 颜色叠加效果

由于 background-color 是最先绘制的背景层（位于图片之下），当同时使用背景颜色和背景图片时，颜色会从图片的透明区域透出来。这一特性可用于实现图片加载失败时的占位颜色，或为装饰性图片提供基调。

3 background-image：背景图片

3.1 基本用法

background-image 用于指定一个或多个背景图像，从 URL 地址、本地文件或渐变函数中获取图像资源。

/* 从 URL 加载图片 */
.hero {
    background-image: url('images/hero-bg.jpg');
}

/* 使用渐变作为背景 */
.gradient-box {
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 从 URL 加载带引号的路径（推荐写法） */
.bg-pattern {
    background-image: url("../images/pattern.png");
}

3.2 渐变背景

CSS 渐变是一种由浏览器实时生成的图像，可以作为 background-image 的值。渐变不需要额外的图片文件，文件体积小且无限缩放不失真。

线性渐变（linear-gradient） 沿直线方向过渡颜色，语法为 linear-gradient(方向, 颜色1, 颜色2, ...)。

/* 从上到下的渐变 */
.vertical {
    background-image: linear-gradient(to bottom, #f8f9fa, #e9ecef);
}

/* 从左到右的渐变 */
.horizontal {
    background-image: linear-gradient(to right, #4facfe, #00f2fe);
}

/* 对角线渐变 */
.diagonal {
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 多色渐变 */
.rainbow {
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

径向渐变（radial-gradient） 从中心点向外辐射过渡颜色，语法为 radial-gradient(形状, 颜色1, 颜色2)。

/* 圆形渐变 */
.radial-circle {
    background-image: radial-gradient(circle, #ff9a9e, #fecfef);
}

/* 椭圆形渐变（默认） */
.radial-ellipse {
    background-image: radial-gradient(ellipse at center, #a18cd1 0%, #fbc2eb 100%);
}

/* 从特定位置开始的渐变 */
.radial-position {
    background-image: radial-gradient(circle at top left, #84fab0, #8fd3f4);
}

3.3 多重背景

从 CSS3 开始，可以为一个元素同时指定多个背景图片，按照声明顺序从上到下层叠显示。最先声明的图片显示在最上层，最后声明的图片位于最底层。

.multi-bg {
    background-image: 
        url('images/overlay-pattern.png'),    /* 顶层：装饰图案 */
        url('images/main-image.jpg'),         /* 中层：主图 */
        linear-gradient(to bottom, #f5f5f5, #e0e0e0);  /* 底层：备用色 */
    background-position: center center, center center, bottom left;
    background-repeat: no-repeat, no-repeat, repeat-x;
}

这种技术常用于：为背景图添加装饰性叠加层、在图片未加载时显示渐变占位符、实现复杂的纹理效果。

4 背景定位与重复

4.1 background-position

background-position 控制背景图片在元素中的起始位置，支持关键词、长度值和百分比三种写法。

/* 关键词定位 */
.pos-top-left { background-position: top left; }
.pos-center { background-position: center; }
.pos-bottom-right { background-position: bottom right; }

/* 长度值定位 */
.pos-20-30 { background-position: 20px 30px; }

/* 百分比定位（相对于元素尺寸） */
.pos-50-50 { background-position: 50% 50%; }

当使用两个值时，第一个值控制水平位置，第二个值控制垂直位置。若只提供一个值，第二个值默认为 center。

4.2 background-repeat

background-repeat 控制背景图片的平铺行为。

/* 默认：水平和垂直方向都平铺 */
.repeat { background-repeat: repeat; }

/* 只在水平方向平铺 */
.repeat-x { background-repeat: repeat-x; }

/* 只在垂直方向平铺 */
.repeat-y { background-repeat: repeat-y; }

/* 不平铺（只显示一次） */
.no-repeat { background-repeat: no-repeat; }

/* 均匀平铺，可能裁剪 */
.round { background-repeat: round; }

/* 保持间距平铺 */
.space { background-repeat: space; }

round 和 space 的区别在于：round 会缩放图片以完整填充空间，space 会在图片之间保持固定间距。

4.3 background-size

background-size 控制背景图片的尺寸。

/* 关键词 */
.cover { background-size: cover; }      /* 铺满整个容器，可能裁剪 */
.contain { background-size: contain; }  /* 完整显示图片，可能留白 */

/* 具体尺寸 */
.size-100-200 { background-size: 100px 200px; }
.size-50-percent { background-size: 50% 100%; }

cover 和 contain 是最常用的取值。cover 确保背景区域被完全覆盖，适用于全屏背景图；contain 确保图片完整显示，适用于产品展示或图标。

5 背景固定与滚动

background-attachment 控制背景图片相对于视口和元素内容的滚动行为。

/* 默认：随元素内容滚动 */
.scroll { background-attachment: scroll; }

/* 固定在视口，不随页面滚动 */
.fixed { background-attachment: fixed; }

/* 随元素内容滚动，但相对于视口固定 */
.local { background-attachment: local; }

fixed 值常用于创建视差滚动效果（Parallax Scrolling）。当页面滚动时，背景图片保持静止，而前景内容正常移动，产生深度感。

6 完整背景属性速查

以下是所有背景相关属性的汇总及其默认值：

简写语法：background 属性可以一次性设置上述所有属性，未显式声明的值将使用默认值。

/* 简写示例 */
.hero {
    background: #f5f5f5 url('hero.jpg') no-repeat center / cover;
}

7 实战技巧

7.1 全屏背景图

.fullscreen-bg {
    min-height: 100vh;
    background-image: url('bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

7.2 毛玻璃效果卡片

.glass-card {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

7.3 条纹背景

.striped {
    background-image: repeating-linear-gradient(
        45deg,
        #f0f0f0,
        #f0f0f0 10px,
        #e0e0e0 10px,
        #e0e0e0 20px
    );
}

7.4 棋盘格背景

.checkerboard {
    background-image: 
        linear-gradient(45deg, #ccc 25%, transparent 25%),
        linear-gradient(-45deg, #ccc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ccc 75%),
        linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

8 性能优化建议

1. 使用 CSS 渐变替代简单图片：渐变由浏览器实时生成，无需额外 HTTP 请求，减少网络开销。

2. 为背景图指定 background-color 作为回退：当图片加载失败或加载缓慢时，背景颜色能保证页面仍具可读性。

3. 合理使用 background-size: cover：在移动端可能需要根据屏幕尺寸提供不同分辨率的图片，避免加载过大的图片文件。

4. 对装饰性图片使用懒加载：对于首屏不可见的背景图片，可通过 JavaScript 的 IntersectionObserver 实现懒加载。