当前位置：首页 > news >正文

CSS 背景属性完全指南：从颜色到简写，一次搞懂

news 2026/6/18 11:09:11

在网页开发中，背景（background）是最常用的 CSS 特性之一。无论是纯色底色、纹理平铺，还是全屏大图、视差滚动，都离不开背景属性家族。本文将系统梳理 7 个背景相关属性，并给出实用案例，帮你彻底掌握。

🎨 一、背景属性总览

CSS 为背景提供了 7 个细分属性，还有一个把它们打包的简写属性：

属性	作用
`background-color`	背景颜色
`background-image`	背景图片
`background-repeat`	图片平铺方式
`background-size`	图片尺寸
`background-position`	图片位置
`background-attachment`	图片是否随滚动
`background-clip/ background-origin`	绘制/定位区域（延伸）
`background`	以上属性的简写

下面逐个拆解。

1️⃣ background-color：背景颜色

设置元素的背景色，默认值为transparent（透明）。

.box{width:300px;height:300px;background-color:#ccc;}

💡 即使设置了背景图片，也强烈建议同时声明background-color。当图片加载失败（断网、路径错误）时，颜色仍能保证可读性；半透明 PNG 下颜色也会透出来。

⚠️ 无障碍提示：文本与背景的对比度至少4.5:1（大号文本 3:1），否则低视力用户难以阅读。

2️⃣ background-image：背景图片

.box{width:600px;height:600px;background-image:url("images/img1.jpg");}

默认行为要记牢：

图片从元素左上角开始显示
图片小于元素 → 默认水平+垂直平铺，铺满元素
图片大于元素 → 从左上角覆盖，超出部分不可见
可设多张背景，用逗号分隔，先写的在上层

.box{background-image:url(star.png),url(cat.jpg);}

📌 背景图对屏幕阅读器不可见，若图片承载关键信息，必须在 HTML 中语义化描述。

3️⃣ background-repeat：平铺方式

控制图片够不够大时怎么重复：

.box{width:800px;height:600px;background-image:url(./images/3.webp);background-repeat:no-repeat;}

常用值：

值	含义
`repeat`	水平 + 垂直都平铺（默认）
`repeat-x`	仅水平
`repeat-y`	仅垂直
`no-repeat`	不平铺
`space`	均匀平铺，不裁剪，首尾贴边
`round`	随容器伸缩，保证完整显示整数张

space和round在现代浏览器已广泛支持，适合纹理背景。

4️⃣ background-size：图片大小

background-size:800px;/* 宽 800，高等比缩放 */background-size:400px 600px;/* 宽 高 明确值 */background-size:50%;/* 相对元素尺寸的百分比 */background-size:cover;/* 等比例放大，完全覆盖元素，可能裁剪 */background-size:contain;/* 等比例放大，完整显示，可能留白 */

核心区别一句话：

cover → 填满容器，图片可能"溢出去"被裁掉
contain → 图片完整显示，容器可能"空一块"露底色

💡 百分比的计算基准是背景定位区域（默认含padding，受background-origin影响）。

5️⃣ background-position：图片位置

控制背景图在容器里的起点：

background-position:50px 50px;/* 右移 50，下移 50 */background-position:-50px -50px;/* 左移 50，上移 50 */background-position:50% 50%;/* 居中 */background-position:right bottom;/* 右下角 */background-position:50px;/* 水平 50px，垂直居中 */

规则速记：

第一个值 = 水平（x），第二个 = 垂直（y）
正值 → 右下，负值 → 左上
单值 → 水平，垂直默认center
关键词：top/ bottom/ left/ right/ center，可组合

百分比的机制比较绕：图像自身的N% 点 对齐容器的N% 点。所以50% 50%才是真正居中。

6️⃣ background-attachment：滚动行为

决定背景图是跟着内容走，还是钉在视口上：

body{background-image:url('smiley.gif');background-repeat:no-repeat;background-attachment:fixed;}

值	行为
`scroll`	默认值，背景随元素内容滚动
`fixed`	相对于视口固定，产生"钉住"效果，常用于全屏背景
`local`	相对于元素内容固定，内容滚动时背景跟着滚（用在可滚动容器内）

fixed是实现视差滚动和"始终可见的背景图"的关键。

7️⃣ background：简写属性

把所有背景属性写在一起，省代码：

.box{background:#cccurl(./images/3.webp)no-repeat center/cover fixed;}

通用写法：

background: color image repeat attachment position/size;

注意事项：

顺序不严格，但position/size必须用/连写，且position在前、size在后——这是唯一必须固定顺序的一对
background-color只能出现在最后一层（多背景时），因为整个元素只有一种底色
没写的属性取默认值，所以简写会覆盖前面的单属性——推荐先写简写，再写需要覆盖的单属性
多背景用逗号分隔每层，每层的子属性也可分别指定

background:url(star.png)no-repeat left top / 50px,url(bg.jpg)no-repeat center / cover;

🔧 一个综合示例

.hero{width:100%;height:500px;background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),url("hero.jpg")no-repeat center / cover fixed;background-color:#333;/* 兜底色 */}

叠加了渐变遮罩 + 大图 + 视差 + 兜底色，是落地页横幅的经典写法。

易踩的坑总结

❌ 以为background-size: 50%是图片原始尺寸的 50% → 实际是元素尺寸的 50%
❌ 简写里把position和size写反 → 必须用pos/size
❌ 多背景忘了background-color只能放最后一层
❌cover想"完整显示图片" → 应该用contain
❌ 可滚动div里想背景跟着内容走 → 用local而非scroll

属性速查表

.box{background-color:#fff;background-image:url(img.png);background-repeat:no-repeat;background-position:center;background-size:cover;background-attachment:fixed;/* 等价于 ↓ */background:#fffurl(img.png)no-repeat fixed center/cover;}