CSS Backgrounds(背景)

背景是 CSS 中最常用、也最能提升页面质感的属性组。通过背景，可以为元素填充颜色、铺设图片、生成渐变，并控制图片是否重复、在什么位置、以多大尺寸显示。掌握背景属性，就能做出横幅、卡片、按钮等丰富多彩的界面。

背景颜色 background-color

background-color 是最基础的背景属性，可以应用在 body、div、p 等任何元素上：

body { background-color: #f5f5f5; }
.box { background-color: lightblue; }

<div class="box">浅蓝色背景的盒子</div>

效果说明：颜色值可以用英文名（lightblue）、十六进制（#f5f5f5）或 rgb()/rgba() 表示。

背景图片 background-image

background-image 用 url() 指定图片路径，默认会在元素内平铺显示：

.banner {
    width: 600px;
    height: 200px;
    background-image: url("banner.jpg");
}

<div class="banner">横幅区域</div>

效果说明：路径相对 css 文件所在位置，也支持绝对地址或 base64。图片默认从左上角开始重复平铺。

背景平铺 background-repeat

background-repeat 控制图片是否重复、如何重复：

.icon {
    background-image: url("logo.png");
    background-repeat: no-repeat;   /* 不平铺，只显示一次 */
}
.repeat-x { background-repeat: repeat-x; }  /* 仅水平方向平铺 */
.repeat-y { background-repeat: repeat-y; }  /* 仅垂直方向平铺 */

效果说明：no-repeat 最常用，适合做图标或按钮背景；repeat-x / repeat-y 常用于制作条纹分隔线。

背景位置 background-position

background-position 设定图片在元素内的起始位置，常用关键字或长度值：

.bg {
    background-image: url("star.png");
    background-repeat: no-repeat;
    background-position: right top;   /* 右上角 */
    background-position: center;      /* 正中间 */
    background-position: 20px 50px;   /* 距左 20px、距上 50px */
}

<div class="bg" style="width:300px;height:150px;">定位示例</div>

效果说明：两个值分别是水平、垂直方向；只写一个值时另一个默认居中，top/bottom/left/right/center 关键字均可混合使用。

简写属性 background

background 是以上各属性的合并简写，一条声明搞定全部背景设置：

.banner {
    background: #eee url("banner.jpg") no-repeat center/cover;
}

效果说明：顺序依次是 颜色、图片、平铺方式、位置/尺寸；位置与尺寸之间用 / 分隔。cover 表示图片铺满整个元素、允许裁切，contain 表示完整显示图片、可能留白。

小结

背景属性的核心是 background-color 与 background-image，再配合 repeat 控制平铺、position 控制位置、简写 background 一键设置。动手多试几组取值，背景就能玩出很多花样。