爱站程序员基地背景模块
- 背景颜色background-color
- 背景图：background-image：url（）；
- 背景图平铺状态：background-repeat：；
- 背景图的位置：background-position：；
- 背景图大小background-size
- 背景图的固定background-attachment
- 背景的简写属性background
背景颜色background-color
默认情况下背景颜色会延伸到border的区域，把border设置成点状可观察。
背景图：background-image：url（）；
容器>背景图 ： 背景图平铺，直到铺满，显示多张背景图
容器=背景图 ： 只显示一张
容器<背景图 ： 只显示背景图的一部分
背景图平铺状态：background-repeat：；
no-repeat 只铺一张背景图
repeat-x 横向平铺
repeat-y 纵向平铺
repeat 双方向直到铺满
背景图的位置：background-position：；
用来设置背景图片的位置。容器内就相当于九宫格内选择位置。
设置方式：
通过top left right bottom center 几个表示方位的词来设置背景。至少两个值。如果只写一个值，第二值默认是center。
background-position：center center； 表示九宫格中间。
background-position：bottom right 表示九宫格右下角
也可以通过像素来设置：
background-position：10px 100px ；（水平方向偏移量 垂直方向偏移量）
把左上角当做原点，上边框是x轴，左边框是y轴。（一般用到负值更多）
背景图大小background-size
background-size 设置图片的尺寸
可选值：
width height 如果只写一个 第二个值默认auto。
cover 图片比例不变，将元素铺满
contain 图片比例不变，让图片在元素中完整显示
背景图的固定background-attachment
- 设置背景图片是否跟随元素移动
- 可选值：
scroll 默认值，背景图片会跟随元素移动
fixed 背景会固定在页面中，不会随元素移动
背景的简写属性background
示例：
background: red url() no-repeat left center;
