这是我参与「第四届青训营 」笔记创作活动的第3天 介绍
该样式来决定元素的背景颜色，background的样式是超级多的，可以略写的，
目录
- background-size
- background-color
- background-image
- background-repeat
- background-position
- background-clip
- background-origin
- background-attachment
backgound
就是下面所有属性的略写，有几个特点
1background-size只能紧挨着background-position，并且以'/'区分
2background-color只能写在最后一个
3其他貌似因为不带重复单词所以不用担心，随便写顺序
background-size
决定背景图像的大小，常用数字和单词进行表达
- cover 此属性尽可能的让图片完全覆盖在元素上面，会让图像变形，但是当图像宽高比与元素宽高比相差过大的时候会自动只显示一部分，这就很坑爹了，但是可以加入background-position让你想展示出来的背景图片进行展示
- contain这个与cover就相反了，它会可能的让图像以原来的宽高比展示出来，如果你还加入了no-repeat属性，你可能就会看见元素有空白出现
注意有些设置了三个数字，据说是设置多重背景时用到。
background-color
可以选择颜色和透明trasnparent
其中颜色能够选择三个
第一个是普通的颜色名字，比如说red green bule
第二个是rgb，必须填入三个，最后一个代表透明度（选填）
第三个是hcla，这个是色调，饱和度，亮度，透明度，有点牛逼的样子
background-image
这个属性是决定背景图片的，注意可以添加多个图像，此外联合其他属性共同讲一下背景的层级，首先边框层级大于背景层级，背景图片大于背景颜色。在背景图片中，先指定（书写）的背景会放得更高
然后讲一下经常使用的两个值
- linear-graident这个属性类似渐变，在css笔记本讲的很清楚。它可以实现以多角度，多段，多距离，加上渐变和透明，很牛，很复杂渐变背景，第一个参数是角度，即渐变的方向·,第二个参数可以均匀变化，也可以不均匀变化.
- url()这个就是直接引用外部的图片
background-repeat
此属性表示图片是否会重复打印出来。在没有设置这个属性的时候，默认是会全局打印，
- repeat-x往x轴打印，
- repeat-y往y轴打印
- no-repeat，取消重复打印
这个样式一般都是要no-repeat的，因为会很难看，但是在使用渐变图像的时候就会进行使用，就是单纯的颜色背景
background-position
用于背景图片的定位，可以使用数字和定位单词
- 数字两种使用方式，两种书写方式：纯数字+单位或者百分比 比如：5px 和 5%
- 定位的话有left top center bottom, right这些常用的值，
当你纯使用数字的时候会自动以左上角进行定位
当你使用单词加数字的时候会实现对某一方位加一段距离的表达
background-clip
这个样式其实就是决定背景会在那里显示，共有四个值，
- border-box背景延伸到边框
- padding-box背景延伸到内边距就停下
- content-box背景只会出现在内容
- text这个比较难说，他是作为文字的背景颜色，也就是你必须先把文字的颜色变成transparent
- 可以实现艺术字的效果
background-origin
跟background-clip很相似，都是决定背景的显示位置，但是注意backgound-clip是专门对背景图像（background-image）进行控制
background-attachment
这个属性表示背景是应该滚动还是固定住。主要使用在元素内部出现滚动条
当背景图片大于一时可以给每个背景进行该属性的绑定，比如background-attachment:scroll,local；会分别给第一个和第二个声明scroll和local
- scroll
- local 此属性和scroll对比，共同点在于他们都会根据元素内容进行定位，也就是滚动的时候都会发生变化（比如说图片在最上面，可以滚动至消失，而不会想fixed元素一样挂在那里。不同点在于，local属性是从整一个元素进行定位，包括边框，而scroll会对元素内容进行定位，不包括边框。
- fixed表示背景不会随内容的上下滚动而做出改变
