background-color: red;
background-image: url(img/564bb450f4931d46bb272fe314760fe.png);| repeat | 默认 水平垂直都平铺 |
| no-repeat | 不平铺 |
| repeat-x | 水平平铺 |
| repeat-y | 垂直平铺 |
background-repeat: repeat;
/* 背景图片的平铺方式 默认水平垂直都重复 */
background-repeat: no-repeat;
/* 背景图片不重复 */
background-repeat: repeat-x;
/* 背景图片水平重复 */
background-repeat: repeat-y;
/* 背景图片垂直方向重复 */
值：x轴坐标 y坐标
也可以分开写：
background-position-x:0;
/*x坐标为0*/
background-position-y:0;
/*y坐标为0*/x，y取值：可以数值+单位 或 百分比 或 英文单词
background-position：left top ;
/*左上 */
background-position：right bottom;
/*右下*/
background-position：center;
/*水平垂直都居中*/
background-position：50% 0；
/*水平居中*/
background-position：50%；
/*水平垂直都居中*/
background-position：0% 100%;
/*左下*/width height
设置图片的宽和高，一般只设置一个，否则可能会造成变形。
contain（比较理性）
包含 把背景图片等比例扩展至最大尺寸，以使它的宽和高适应整个背景区域 可能背景区域有留白。
cover（比较无私）
覆盖 把背景图片等比例扩大至足够大，以使它铺满整个背景区域可能会使图片裁剪。
background-size: 500px;
background-size: 50%;
/* 容器的50% */
background-size: 100%;
background-size: contain;
/* 包含 把背景图片等比例扩展至最大尺寸,以使背景图片的宽度或高度适应背景区域, 可能背景区域有留白 */
background-size: cover;
/* 覆盖 把背景图片等比例扩大至足够大,以使背景图片铺满整个背景区域, 可能使图片裁剪 */scroll：
默认 背景图片随页面滚动
fixed：
背景图片固定不动
background-attachment: fixed;
/* 固定不动 */
background-attachment: scroll;
/* 默认 背景图片随网页滚动 */
background-origin: padding-box;
/* 从内边距的padding位置渲染 */
background-origin: content-box;
/* 从内容区域渲染 */
background-origin: border-box;
/* 从border位置渲染 */background : bg-color值 bg-image值 bg-repeat值 bg-position值 / bg-size值 bg-attachment值 ；
没有先后顺序 例如：
background: #FF0000 url(images/pj2.jpeg) no-repeat 50% 20% / 500px scroll;
