background，前端常用设置背景属性之一，常用的属性包括image,color,repeat等，当然还有很多不那么常用，但是非常有用的属性，如origin、size的。
background-position
background-position属性可以为一个或多个值，用逗号隔开。 一个定义一组x/y坐标(相对于被设置背景的元素的边缘),来呈现背景图片展示位置。它可以被定义为一个值或者两个值。如果被定义为两个值，则第一个值代表水平位置(相对元素左边)，第二个代表垂直位置。如果只指定一个值，则第二个值默认为center.
单个值(这里先讲单个值得情况，两个值下面会提到)
- center，用来居中背景图片。
- top,left,bottom,right中的一个。用来指定把背景图片放在哪一个边缘，另一个维度被设置成50%，所以背景图片被放在指定边缘的中间位置。如例子：
- 或，指定相对于左边缘x坐标，则y坐标被设置成50%，有些拗口，看例子。
background-position: 10px; // 距离左边10px,y轴方向居中
background-position: 10%; // 距离左边，该项目宽度10%的宽度,y轴方向居中
图片如下：
注意事项:
如果背景图片的大小和容器一样，则设置百分比的值将会失效，因为==容器和图片的差为0==(图片永远填满容器，并且图片的相对位置和容器的相对位置永远重合),这种情况下设置背景图位置，需要偏移值（例如px）。
两个值的语法: 一个定义x坐标，另一个定义y坐标。可能的情况如下：
- 关键字top,left,bottom,right中的一个。如一个值给出left/right那么这个值定义x轴位置，另一个值定义y轴的位置。如一个值给出top/bottom那么这个值定义y轴位置，另一个值定义x轴的位置。
- 或, 若另一个值是left/right,那么设置的或定义相对于上边缘的y轴位置。如果两个值都是或，则第一个值定义x轴位置，第二个定义y轴位置。
background-size
设置背景图片大小。 图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
单张图片的背景大小可以使用以下三种方法中的一种来规定:
以该段代码为例，下面设置属性均以该例为准。
// html
<div class="box"></div>
// css
.box{
width: 320px;
height: 229px;
background-color: pink;
background-image: url('./img/bg.jpg');
background-repeat: no-repeat;
}
- 使用关键词contain
缩放背景图片以完全装入背景区，可能背景区部分空白。contain尽可能的缩放背景并保持图像的宽高比例(图像不会被压缩)。该背景图会填充所在容器。当背景图和容器的大小不同时，容器的空白区域(上/下或者左/右)会显示由background-color设置的背景颜色。
background-size: contain; // 效果图如下
- 关键词 cover 缩放背景图片以完全覆盖背景区，可能部分背景图片部分看不见。和contain值相反，cover值尽可能大的缩放背景图像并保持图像的宽高比例(图像不会被压扁)。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的左/右或者上/下部分会被裁剪。
background-size: cover; 效果图如下，同时将原图放在下面，便于cover与contain的对比，方便理解
原图：
对比可看出差别：contain背景图全部都在容器内，cover尽可能覆盖容器，超过的部分被截掉。
==当通过宽度和高度值来设定尺寸时，你可以提供一或者两个数值：==
- 如果仅有一个数值被给定，则这个数值作为背景图的宽度，高度被设置为auto.
- 如果给定了两个数值，第一个作为宽度，第二个作为高度。
每个值可以是,或者auto
值，指定背景图片的大小，不能为负值。
background-size: 100px;
background-size: 100px 100px;
值，指定背景图片相对背景区的百分比。背景区由background-origin设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框。如果attachment为fixed，背景区为浏览器可视区(即视口)，不包括滚动条。不能为负值。
这里提到的background-origin在下面会提到。
- auto 以背景图片的比例缩放背景图片
若背景图有多张时，可以用多组值来设置背景图片大小，组间以逗号分隔。
background-image: url('./img/autumn.jpg'), url('./img/lizard.png');
background-size: 50% 25%, contain;
==注意==
位图一定有固有尺寸与固定比例，矢量图可能两者都有，也可能只有一个。渐变视为只有固有尺寸或者只有固定比例的图片。
background-clip
background-clip设置元素的背景(背景图片或颜色)是否延伸到边框下面。 这个属性在平时工作中用到的比较少，有些特定需求会用到，结合图文详细了解。
共有四种值：
- border-box 背景延伸至边框外沿（但在边框下层）
.box{
width: 560px;
height: 100px;
color: #fff;
text-align: center;
line-height: 100px;
padding: 20px;
border: 10px dashed #333;;
background-image: url('./img/autumn.jpg');
background-clip: border-box;
background-repeat: no-repeat;
font-size: 2em;
font-weight: 700;
}
注意
背景图只在边框的下层，右下边框，而非全部边框，这和我最初理解的有些出入，误以为四边边框下层均有，所以朋友们使用时应注意。
- padding-box 背景延伸至内边距（padding）外沿。不会绘制到边框处。
background-clip: padding-box;
- content-box 背景被裁剪至内容区（content box）外沿
background-clip: content-box;
- text 背景被裁剪成文字的前景色。
color: transparent;
background-clip: text;
-webkit-background-clip: text;
background-origin
background-origin 规定了指定背景图片background-image 属性的原点位置的背景相对区域.对background-position和background-size都有影响。
注意：当使用 background-attachment 为fixed时，该属性将被忽略不起作用。
- border-box 背景图片的摆放以border区域为参考
- padding-box 背景图片的摆放以padding区域为参考
- content-box 背景图片的摆放以content区域为参考
具体可以自己操作看效果。
background-attachment
background-attachment css属性决定背景图像的位置是在视口内固定，还是随着包含它的区块滚动。
- fixed 该值表示背景相对于视口固定，即使被设置背景的元素拥有滚动机制，背景也不会随着元素的内容滚动。
#app{
width: 600px;
height: 400px;
overflow: scroll;
}
