一次掌握CSS背景属性相关属性

1 background-image

background-image: url();

• 图片地址必须放在 url() 中，图片地址可以是本地地址也可以是网络地址

• 默认情况下如果背景图片小于所在 div 的大小，那么将在 x y 方向上重复图片

• 同一个标签可以同时设置背景图片及背景颜色，如果同时设置，那背景图片会把背景颜色覆盖

• 如果设置了多张图片，设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面

注意：如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的

2 background-repeat

background-repeat常见设置值：

• repeat 默认情况下是此，x, y 都重复

• no-repeat 不重复

• repeat-x x 方向上重复

• repeat-y y 方向上重复

作用：通过平铺来减小图片的大小，从而加快网页的访问速度

3 background-size

background-size用于设置背景图片的大小

• auto：默认值, 以背景图本身大小显示

• 宽度px 高度px;

• 数% 数%；宽高也可以以百分比的形式设置，表示背景宽高是当前元素的宽高的百分之几

• 宽度或高度其中一个设置为 auto，则会根据另一个进行等比拉伸

• cover：表示宽高都要进行等比拉伸，直到两个都把当前元素填满

• contain：表示宽高都要进行等比拉伸，直到其中一个都把当前所在元素对应的那个填满填满

4 background-position

用于设置背景图片在水平、垂直方向上的具体位置

background-position: 水平方向 垂直方向

• 可以设置具体的数值 比如 20px 30px;

• 水平方向还可以设值：left、center、right

• 垂直方向还可以设值：top、center、bottom

• 如果只设置了1个方向，另一个方向默认是center

应用场景：当一张背景图片较大时，如果想让背景图片比较重要的部分在尽管网页缩放时也放在网页中间，那么就要用到该定位。

5 background-attachment

默认情况下背景图片会随着滚动条的滚动而滚动，如果不希望背景图片随着滚动条滚动，那么我们就可以设置背景图片和滚动条的关联方式

background-attachment

• scroll：此关键属性值表示背景相对于元素本身固定， 而不是随着它的内容滚动

• local：此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动.

• fixed：此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动

基本不会用到的

6 background

background：背景颜色 背景图片 平铺方式 关联方式 定位方式

• 任何一个属性都可以省略

所以有时你看到 background: #f00; 这种也不必想着怎么 background 也能设置颜色，设置颜色不是background-color？这里只是其它属性省略没写而已。