背景

属性	说明
background-color	背景颜色
background-image	设置一个或多个背景图片
background-repeat	背景图片平铺规则
background-attachment	滚动时的背景行为
background-position	设置背景图像在容器中的定位
background-size	设置背景图像大小
background-clip	设置背景在容器中的显示区域范围（color, img）
background-origin	设置背景图像在容器中的参考系原点

background-color

background-color: <color>;

设置背景颜色，取值可以是：十六进制值、rgb、颜色名称，默认值是 transparent。

background-image

设置背景图片，默认值是 none，一般搭配 url() 函数使用，引入外部图片资源，会覆盖 background-color，默认情况下从左上角在 x, y 方向平铺满整个元素。

另外，该属性取值还可以搭配 *-gradient() 渐变函数使用。

background-repeat

background-repeat: repeat | repeat-x | repeat-y | no-repeat;

设置背景图片在什么方向上进行平铺，取值如下：

• repeat，默认值，同时沿着 x 轴和 y 轴平铺
• repeat-x，只沿 x 轴平铺
• repeat-y，只沿 y 轴平铺
• no-repeat，不平铺

background-position

background-position: <x-offset> <y-offset>;

这个属性用来设置背景图片在元素中的位置，第一个值用来确定水平位置，第二个值用来确定垂直位置，其取值如下：

• <percentage>，默认值为 0% 0%，如果只设置了一个值，那么另一个值为 50%
• <length>，单位除了是百分号还可以是像素或其他任何单位
• (left/right/center) (top/bottom/center)，如果只指定一个关键字，那么另一个默认为 center，比如：
  • background-position: center 等价于 background-position: center center
  • background-position: left 等价于 background-position: left center
  • background-position: top 等价于 background-position: center top

上面都是两值，实际上还可以取三值/四值：

.image-container {
  /* 水平方向从元素右边起偏移 30%，且位于元素底部 */
  background-position: right 30% bottom;

  /* 水平方向从元素右边起偏移 30%，垂直方向从元素底部起偏移 20% */
  background-position: right 30% bottom 20%;
}

另外需要注意的是该属性和 background-attachment 的取值有关：

• background-attachment: scroll，以整个元素的左上角作为 0% 0%
• background-attachment: fixed，以当前视口的左上角作为 0% 0%
• background-attachment: loacl，以当前元素的内容左上角作为 0% 0%

详情测试可以查看CodePen

important

取值为正时，图像相对于容器右移（下移），取值为负时，图像相对于容器左移（上移），移动过程中以图像的左上角作为 "质点"，默认情况下以容器 border 内部的左上角作为参考系原点。

/* 图像向左移动 100px */
background-position: -100px 0;

/* 图像向右移动 200px，向上移动 100px */
background-position: 200px -100px;

background-size

background-size: <width> <height>;

当我们使用 url() 引入图片资源作为背景时，该图片大小为实际的图片资源大小，使用该属性可以设置背景图片的宽高，默认值为 auto auto，表示图片资源原本的大小，其取值如下：

• auto，默认值
• <length>
• <percentage>，计算值是相对于背景区域的宽高，因此和 background-origin 有关，另外 background-attachment: fixd，则背景区域为整个视口
• cover，尽可能的缩放图像，让其覆盖到整个背景区域，因为要保持原比例，所以可能会出现图像部分区域被裁减掉
• contain，尽可能的缩放图像，让其宽度或者高度达到背景区域最大限度，图像不可能被裁减，但是背景可能不会被图像覆盖完全，会出现空白区域

取一值和两值

/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
background-size: 50%;
background-size: 3em;
background-size: 12px;
background-size: auto;

/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

important

取一值的时候相对于设置的是背景图像的宽度，高度会同比例变化，因此取一值时不会导致图片失真。

contain 与 cover 的区别

background-attachment

background-attachment: scroll | fixed | local;

这个是最不好理解的一个属性，它的主要作用是当 元素随着页面滚动 或者 元素内容滚动时，设置背景图片的行为表现，其取值如下：

• scroll，默认值，背景图像相对于盒子占位大小固定
• fixed，背景图像相对于视口固定
• local，背景图像相对于盒子内容大小固定

在解释这些取值之前，先明确一个概念，该属性与滚动有关，滚动条可以分为两类：

• 对于整个浏览器页面，这里可以理解为 html 元素，里面的内容超过视口大小后，浏览器右侧就会出现滚动条。这里就是上面所说的 元素随着页面滚动。
• 我们给固定宽高的块级元素加上 overflow: auto，当该元素内容超过其高度时，就会出现滚动条。这里就是上面说的 元素内容滚动。

scroll

这是 background-attachment 的默认值，它的特点如下：

• 元素背景图片相对于元素固定，元素在页面中滚动时，其背景图片随着元素同步滚动
• 在元素内部滚动其内容时，背景图片不会跟着滚动

fixed

• 元素背景图片相对于视口固定，无论我们如何滚动页面，该元素背景图片始终是位于视口同一个位置
• 但是由于它只是某个元素的背景图片，元素会随着页面滚动而滚动，所以当元素滚出背景图片所占视口范围后，背景图片就会消失啦
• 滚动元素内容时，背景图片也是固定的，因为它相对于视口固定

local

• 元素背景图片相对于元素内容固定，当元素内容滚动时，背景图片会同步滚动
• 页面滚动时，元素也会跟着滚动，因此背景图片也跟着滚动

详情测试可以查看CodePen

image、repeat、position、size 和 attachment 取多组值

image 取多组值

background-image: url(img_flwr.gif), url(paper.gif);

可以在一个盒子里面设置多张背景图片，越靠前的取值，图片位于的层级越高，比如这里的 url(img_flwr.gif) 是覆盖在 url(paper.gif) 上面的。

repeat 取多组值

background-repeat: no-repeat, repeat;

对应于 background-image 中的每组图片，第一组图片为不重复平铺，第二组组片为重复平铺。

position 取多组值

background-position: right bottom, left top;

对应于 background-image 中的每组图片。

size 取多组值

background-size: 100% auto, contain;

对应于 background-image 中的每组图片，第一个图片宽度 100%，高度自适应，第二个图片大小为 contain。

attachment 取多组值

background-attachment: scroll, fixed;

页面或者容器内容滚动时，第一个图像相对于容器大小固定，第二个图像相对于视口固定。

background-origin

background-origin: border-box padding-box content-box;

规定了指定背景图片 background-image 属性的图像在容器中的参考系原点，默认值为 padding-box。

• padding-box，默认值，参考系原点处于 border 与 padding 的交线左上角
• border-box，参考系原点处于 margin 与 border 交线的左上角
• content-box，参考系原点处于 padding 与 content 交线的左上角

important

• 当设置 background-attachment: fixed 时，background-origin 不起作用
• 盒子 border 的层级是高于背景图像的，所以如果我们设置 border-box，图像位于原点时，它的部分内容会被 border 的颜色覆盖掉

background-clip

background-clip: border-box | padding-box | content-box | text;

该属性用于设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面，默认值为 border-box。

这里的 border-box、padding-box 和 content-box 的原理在 background-origin 中的一致。

important

background-origin 和 background-clip 的默认值不一样，前者为 padding-box，后者为 border-box。

简写

虽然有关 background  的所有属性都可以使用 background  一个属性来简写，但是建议对于 origin、clip、size  进行单独设置。

background: <color> <bg-image> <position> <repeat-style> <bg-attachment>;

上面的属性不分先后，可以任意排序。

background: black url(xxx) 100px 20px no-repeat;

对于简写属性来说，如果某一项没有写出来，那么会取默认值，因此很容易出现下面这种错误。

background-repeat: no-repeat;
background: skyblue;

由于 background 简写位于 background-repeat 后面，所以默认值会覆盖之前设置的 no-repeat，因此对于背景设置来说，简写写到最开头的位置，后续要单独设置的背景属性则加到后面。

background: black url(xxx) 100px 20px no-repeat;
background-origin: border-box;
background-clip: border-box;
background-size: cover;

简写也可以设置多组背景，用逗号分隔开。

background: black url(xxx) 100px 20px no-repeat, url(xxx) 200px no-repeat;
background-origin: border-box, padding-box;
background-clip: border-box, padding-box;
background-size: cover, contain;