前言
background是一种 CSS 简写属性，用于一次性集中定义一个或多个背景属性，其中的属性有以下这些：
-
background-clip -
background-color -
background-image -
background-origin -
background-size -
background-attachment -
background-blend-mode -
background-position -
background-repeat
内容不少，我会按照上面这个顺序来展开图文介绍
background-clip
background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面
clip：有裁剪，截取，片段的意思
如果没有设置背景图片background-image或背景颜色background-color
这个属性只有在边框 border被设置为soild、透明或半透明时才能看到视觉效果（与 border-style或 border-image有关）
否则，本属性产生的样式变化会被边框覆盖。
取值： (初始值为：border-box)
border-box背景延伸至外边距margin外沿。
background-color 设置元素的背景色，属性的值为颜色值或透明transparent，二者选其一
color：颜色的意思
取值：(初始值为transparent )
<color>一个描述背景统一颜色的CSScolor值。即使一个或几个的background-image被定义，如果图像是不透明的，通过透明度该颜色也能影响到渲染当然，transparent也是一种颜色，即rgba(0,0,0,0)那么背景色的概念了解后，就要引出背景图的概念，以及他们同时出现时的权重关系。
background-image
background-image属性用于为一个元素设置一个或者多个背景图像
image：映像，图像的意思
多个背景图像的层级情况：先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像图层位置最高。
与边框的层级情况：元素的边框 border会在指定的图像上面绘制
与背景色的层级情况：元素的背景色background-color 会在在指定的图像下面绘制
拿MDN网站里面的图举个例子：
- 这个元素的
background-image有三个属性值 - 第一个属性代表过渡色，第二个属性
lizard.png是蜥蜴所在的层级，第三个属性star.png是星星所在的层级
最后呈现的效果是：过渡色在最底部，先出现的lizard.png在star.png的上层
背景色 #000 被设置在最底层
如图所示：
取值：(初始值为：none)
none是一个表示无背景图的关键字*image用来标记将要显示的图片，支持多背景设置，背景之间以逗号隔开linear-gradient()函数用于创建一个表示两种或多种颜色线性渐变的图片!!!> 备注： 即使图像是不透明的，背景色在通常情况下并不会被显示，web 开发者仍然应该指定background-color属性。因为当图像无法被加载（如网络连接断开的情况）浏览器会将此情况等同于其值被设为none，背景色就会被展现。
图像的绘制与盒子和边框的关系，需要在 CSS 属性background-clip 和 background-origin 中定义，那我们顺带讲下一个部分。
background-origin
background-origin规定了指定背景图片background-image的原点位置的背景相对区域
origin:起源，出身，（数）原点的意思
取值：
border-box背景图片的摆放以 border 区域为参考*padding-box背景图片的摆放以 padding 区域为参考*content-box背景图片的摆放以 content 区域为参考> 是不是似曾相识，这不就是background-clip吗？
单看这描述两者确实很相像，但是这两个元素如今还能同时写在这个文章里是有原因的
刚才的例子，这次我们加上背景色和摆放尺寸的设定（下回会讲到）以便观察
我们把background-clip改成background-origin
结果发现：
-
background-clip是一种clip裁剪，把背景色和背景图一起裁剪到padding-box里面 -
而
background-origin是设定背景图origin原点，只把背景图放在padding-box里面 -
在
padding-box和content-box的表现情况和background-clip也同样只有这个小区别，而且他没有text属性。
注意：当使用 background-attachment为 fixed 时，该属性将被忽略，不起作用。
那么background-attachment是什么属性，在下篇文章会讲到。
最后
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
有需要的小伙伴，可以点击下方卡片领取，无偿分享
