背景

这一课你将能做到

1. 控制背景色、背景图、位置、大小、重复、附着方式
2. 用 background 简写属性写紧凑代码
3. 写出常见的视觉效果：封面图、水印、纹理、多层背景

为什么要学

背景是页面的「底色和质感」。一个空白背景的网站像没装修的房子；加了渐变、纹理、封面图，立刻有了氛围。hero 大图、卡片缩略图、文章封面……全靠 background 系列属性。

人话：背景属性就像给墙贴壁纸——选什么颜色（color）、贴什么图（image）、贴多大（size）、从哪开始贴（position）、贴不贴满（repeat）、跟着人走还是钉死（attachment）。

先建立图像

<style>
    .demo {
        width: 400px;
        height: 200px;
        border: 1px solid #ddd;
        margin-bottom: 12px;
        color: #fff;
        padding: 12px;
    }
    .d1 { background-color: #2c3e50; }
    .d2 {
        background-image: linear-gradient(135deg, #667eea, #764ba2);
    }
    .d3 {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="2" fill="%23fff"/></svg>');
        background-repeat: repeat;
        background-color: #333;
    }
</style>

<div class="demo d1">纯色背景</div>
<div class="demo d2">渐变背景</div>
<div class="demo d3">重复纹理背景</div>

跟着做

步骤 1：background-color 背景色

.box { background-color: #f5f5f5; }
.box { background-color: rgba(0, 0, 0, 0.5); }   /* 半透明 */
.box { background-color: transparent; }           /* 透明（默认） */

背景色会铺满 content + padding + border 区域（除非用 background-clip 改变）。

步骤 2：background-image 背景图

.box { background-image: url("hero.jpg"); }
.box { background-image: linear-gradient(to right, red, blue); } /* 渐变也是 image */
.box {
    background-image:
        url("logo.png"),
        linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
        url("bg.jpg");
    /* 多层背景，前面的在上面 */
}

步骤 3：background-repeat 平铺方式

.box { background-repeat: repeat; }     /* 默认，双向平铺 */
.box { background-repeat: no-repeat; }  /* 不平铺 */
.box { background-repeat: repeat-x; }   /* 横向平铺 */
.box { background-repeat: repeat-y; }   /* 纵向平铺 */
.box { background-repeat: space; }      /* 平铺但保持完整图 */
.box { background-repeat: round; }      /* 平铺且拉伸凑整 */

步骤 4：background-position 位置

.box { background-position: center; }              /* 居中 */
.box { background-position: top right; }           /* 关键字组合 */
.box { background-position: 50% 50%; }             /* 百分比 */
.box { background-position: 20px 30px; }           /* 像素：x y */
.box { background-position: right 10px bottom 20px; } /* 距右 10 距底 20 */

步骤 5：background-size 尺寸

.box { background-size: auto; }        /* 原始尺寸 */
.box { background-size: 200px 100px; } /* 指定宽高 */
.box { background-size: 50%; }         /* 相对容器 */
.box { background-size: cover; }       /* 覆盖整个容器（可能裁切） */
.box { background-size: contain; }     /* 完整显示（可能留白） */

cover vs contain：

• cover：图片等比放大到覆盖整个容器，超出部分裁掉。Hero 大图用这个。
• contain：图片等比缩放到完全可见，可能留白边。Logo、产品图用这个。

步骤 6：background-attachment 附着

.box { background-attachment: scroll; } /* 默认，随元素滚动 */
.box { background-attachment: fixed; }  /* 相对视口固定（视差滚动效果） */
.box { background-attachment: local; }  /* 随内容滚动 */

fixed 能做出「背景不动，前景滑过」的视差效果，但 iOS Safari 不支持。

步骤 7：background 简写

/* 顺序：color image position / size repeat attachment */
.box {
    background:
        #333
        url("hero.jpg")
        center / cover
        no-repeat
        fixed;
}

简写会重置未指定的值为默认值，所以要小心覆盖问题。

步骤 8：实战——Hero 大图

<style>
    .hero {
        height: 60vh;
        background:
            linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
            url("https://picsum.photos/1600/900") center / cover no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
    }
    .hero h1 { font-size: 3rem; }
</style>

<section class="hero">
    <h1>欢迎来到我的网站</h1>
</section>

技巧：用半透明渐变叠加在图片上，提升文字可读性。

步骤 9：background-clip 和 origin

.box { background-clip: border-box; }  /* 默认，背景延伸到边框 */
.box { background-clip: padding-box; } /* 背景只到 padding */
.box { background-clip: content-box; } /* 背景只在 content 区 */

.box { background-origin: padding-box; } /* 背景图起点 */

经典案例——透明边框：

.tag {
    background: #fff padding-box;     /* 背景只到 padding */
    border: 8px solid rgba(0,0,0,0.2); /* 半透明边框 */
}

讲清楚要点

1. 背景色在最底层，背景图在上：图盖住色，色从图的透明处透出。
2. 多层背景前面的在上：background: url(a), url(b)，a 在 b 上面。
3. cover 可能裁切，contain 可能留白：根据是否「必须看完整图」选择。
4. 简写会重置：background: url(a.png) 会把其他子属性重置为默认值。
5. 渐变是 image：可以和其他背景图叠加。

你可能会懵的地方

• 背景图为什么不显示？ 元素没高度。背景图不会撑开容器，要给容器显式高度或有内容。

• background-position 的 % 怎么算？ 50% 意思是「图片的 50% 处对齐容器的 50% 处」，所以 center 等价于 50% 50%。

• fixed 在移动端不工作？ iOS Safari 出于性能考虑不支持 background-attachment: fixed，回退方案用伪元素 + position: fixed。

• 多张背景图怎么分别控制 size？ background-size: cover, 100px, auto; 用逗号按顺序对应。

• 背景图能随容器自适应吗？ background-size: cover 或 contain 就能；要更精确控制用 img 标签 + object-fit。

错法对照

错法	问题	正解
空 div 设背景图期望显示	没高度不显示	给高度或加内容
简写覆盖了单独属性	background: url() 重置全部	简写放最前，单独属性放后
大图直接平铺导致拉伸变形	没设 size	加 background-size: cover
background-position: center 50%	关键字和 % 混用出错	center center 或 50% 50%
用 background-attachment: fixed 做 iOS 视差	iOS 不支持	用 transform 视差方案

卡点急救

1. 背景图 404：F12 → Network 看请求；检查路径是相对谁（CSS 文件位置）。
2. 图片变形：用 cover 或 contain，不要写死宽高不匹配。
3. 多层背景顺序错：写在前的在上层，注意调整。

面试常问

• cover 和 contain 区别？ cover 等比放大覆盖容器，可能裁切；contain 等比缩放完整显示，可能留白。

• background 简写顺序？ color image position/size repeat attachment origin clip，常见只用前五项。

• 怎么做响应式背景图？ 用 background-size: cover + 媒体查询换不同尺寸图；或改用 <img> + srcset。

自测三问

1. background: url(a.png) center / cover no-repeat 中 / 前后各是什么？
2. 多层背景 background: url(a), url(b) 谁在上层？
3. 为什么空 div 设了 background-image 看不到？

小结一句话

背景属性的核心是「位置 + 尺寸 + 平铺」三件套；hero 大图标配 center / cover no-repeat，文字叠加层用半透明渐变。

延伸

• MDN background
• 下一课：动画与变换，让页面动起来。