这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战
介绍
最近在写大屏项目的时候，经常会使用到background来写一些大屏中常见的效果。比如说在渐变的情况下还有背景图片。渐变我们都知道用line-gradient来写，但是渐变加背景图片却是第一次遇到，然后发现了background的强大之处。比如下面的这种效果：
background属性
background是一个简写属性，其中包含background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size和background-attachment属性。
background可以指定多层背景，这个时候我们使用逗号分隔每个背景层。 这个特性就是我们用来实现多层背景效果的依据。
每一层的语法
- 在每一层中，下列的值可以出现0到1次：
attachmentbackground-imagepositionbackground-sizerepeat-style
- background-size只能紧接着background-position出现，用
/分割 - background-color只能在background的最后一个属性上定义，因为整个元素只有一个背景颜色
background-attachment
background-attachment属性决定背景图像的位置是在视口内固定，还是随着包含他的区块滚动
属性值：
- fixed：此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动
- local： 此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框
- scroll：此关键属性值表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）
background-origin
background-origin规定了背景图片的原点位置的背景相对区域
属性值：
- border-box：背景图片的摆放以border区域为参考
- padding-box: 以padding区域为参考
- content-box: 以content区域为参考
background-clip
backgroun-clip设置元素的背景或颜色是否延伸到边框、内边距盒子、内容盒子下面，或者被裁剪成文字的前景色
属性值：
- border-box：背景延伸至边框外沿（在边框下层）
- padding-box: 背景延伸至内边距外沿（不绘制到边框出）
- content-box：背景被裁剪至内容区的外沿
- text：背景被裁剪成文字的前景色
使用
在项目中，主要使用到了background属性的简写形式，这样更加方便，在理解的情况下更容易阅读。示例如下：
background:
url('../assets/img/blockDecoration.png')
repeat-x
bottom 0px left 0px/210px 56px,
linear-gradient(180deg,
rgba(0, 164, 255, 0.25) 0%,
rgba(120, 214, 255, 0.08) 100%);
这样就能实现上图的样式了，这里主要的地方就是要注意背景图片的位置和宽度设定要连在一起并使用/分隔，并且在有多个背景的时候，使用,分隔。这样就能实现我们需要的功能了。
