持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天，点击查看活动详情
前言
大家好呀，我是L同学。在上篇文章CSS属性 - box-sizing中，我们学习了上下margin的传递、上下margin的折叠、外轮廓 - outline、盒子阴影 – box-shadow、CSS属性 - box-sizing等等相关知识点。今天，在这篇文章中，我们将学习如何使用CSS设置背景，包括background-image、background-repeat、background-size、background-position等相关知识点。
CSS设置背景
在开发中, 为了让网页更加美观, 我们经常会设置各种各样的背景。我们前面已经学习了如何设置背景颜色, 这里我们要学习设置背景的更多知识。
background-image
background-image用于设置元素的背景图片。会盖在(不是覆盖)background-color的上面。如果设置了多张图片，设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面。注意：如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的。
background-repeat
background-repeat用于设置背景图片是否要平铺。
常见的设置有：
- repeat：平铺
- no-repeat：不平铺
- repeat-x：只在水平方向平铺
- repeat-y：只在垂直平方向平铺
background-size
background-size用于设置背景图片的大小。
常见的设置有：
- auto：默认值, 以背景图本身大小显示
- cover：缩放背景图，以完全覆盖铺满元素,可能背景图片部分看不见
- contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
<percentage>：百分比，相对于背景区- length：具体的大小，比如100px
background-position
background-position用于设置背景图片在水平、垂直方向上的具体位置。可以设置具体的数值 比如 20px 30px。水平方向还可以设值：left、center、right。垂直方向还可以设值：top、center、bottom。如果只设置了1个方向，另一个方向默认是center。
background-attachment
background-attachment决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
可以设置以下3个值：
- scroll：此关键属性值表示背景相对于元素本身固定， 而不是随着它的内容滚动。
- local：此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动。
- fixed：此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
