作为一名前端开发者，想必你也经常使用CSS background 属性，那你知道这个属性是哪些属性的简写吗？知道 background-color 背景颜色永远是最低？知道 background 属性设置值有什么注意事项吗？
带着上面的问题，我们一起揭开 background 神秘的面纱~
background 是一个 CSS 简写属性，用于设置与背景有关的内容。例如：图片，颜色、尺寸等。
它是多个 CSS 属性的集合：
background-color: 设置背景颜色background-image: 设置背景图片，可以指定一个或多个背景图片background-position: 为每个背景图片设置初始位置background-repeat: 定义背景图片的重复方式background-size: 背景图片的大小background-attchment: 设置背景图片是随着页面滚动还是固定background-origin: 指定原点位置的相对区域background-clip: 设置背景图片的延伸方式通常情况下属性顺序：
background: bg-color bg-image bg-position / bg-size bg-repeat bg-attchment bg-origin bg-clip上面的顺序不是固定，有几点需要注意的地方：
background 可以指定多层背景，每层用逗号分隔，前面层会覆盖后面的层。每一层中 bg-position/size/repeat/image/attachment 等属性，可以出现 0 次或 1 次。bg-size 必须紧跟 position 后面出现，并且用 / 分隔，例如：to/40%。bg-color 只能包裹在最外层，因为只设置一种背景颜色。好了，今天的 background 学完了，那我正式开始吧~
作为前端er，设置背景颜色手到擒来、家常便饭。在背景层级中永远是最低层，图片是覆盖在背景上的，其默认 transparent。
设置颜色可以使用16进制颜色值、RGB、RGBA、HSL、HSLA等。
对初学者来说，首先想到的是使用 opacity 指定透明度。但是这种方法，设置背景透明度的同时文本也会有透明度。正确的设置方法：rgba() 或 hsla()。
.opacity { background-color: red; opacity: 0.5; } .rgba { background-color: rgba(255, 0, 0, 0.5); } .hsla { background-color: hsla(0, 100%, 50%, 0.5); }hsla(色相、饱和度、亮度、透明度)
效果如下图，注意使用 opacity 不仅背景颜色有透明度，文字也有透明度。
设置背景渐变色，通常使用 linear-gradient() 函数。该函数创建一个表示两种或多种颜色线性渐变的图片。函数的返回值是 image 类型，设置到 background 对应的是 bg-image 而不是 bg-color。关于 linear-gradient稍后学习。
通常可以设置一个或者多个图片。前面也提到渐变色函数 linear-gradient是图片类型，可以设置为背景图片。
linear-gradient 函数用于创建两种或多种颜色线性渐变的图片，语法比较复杂具体参考MDN文档，我们可以简单记忆为linear-gradient(angle/to 起始点位置，颜色列表)。
使用该函数需要的注意的是角度坐标系统问题。看下面的测验，background-image: linear-gradient(45deg, red, yellow); 对应下面哪个项？
正确答案是 ：B
为什么会这样的呢？如果你了解 linear-gradient 的角坐标就知道。
45deg时渐变的方向是从左下到右上变化。
参考：深入理解CSS3 gradient斜向线性渐变
实现切角效果，例如：
/*第一个*/ .box_one { background: linear-gradient(-45deg, transparent 15px, #58a 0); } /*第二个*/ .box_two { background: linear-gradient(-45deg, transparent 15px, #58a 0) right, /*right: 设置position*/ linear-gradient(45deg, transparent 15px, #58a 0) left; background-size: 50% 100%; background-repeat: no-repeat; /*避免重复*/ } /*四个角*/ .box_four { background: linear-gradient(135deg, transparent 15px, #58a 0) top left, linear-gradient(-135deg, transparent 15px, #58a 0) top right, linear-gradient(-45deg, transparent 15px, #58a 0) bottom right, /*right: 设置position*/ linear-gradient(45deg, transparent 15px, #58a 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; /*避免重复*/ }经过测试，当元素设置了 bg-image并且 display 为 none 时，Chrome浏览器并没有获取网络图片，点击屏幕 display 不为 none 获取图片。（PS：其他浏览器没有测试~）
下面的效果图
.image { width: 300px; height: 400px; background-image: url('img/1.png'); background-repeat: no-repeat; background-size: contain; transition: 1s ease-in-out background-image; // 背景过渡 1s } .image:hover { background-image: url('img/2.png'); }无论是静态图片、位图、还是外链图都支持 CSS 动画/过渡效果，唯独CSS渐变不支持。
可以参考张鑫旭老师的文章《颠覆，原来background-image也是支持CSS动画的》
bg-position 支持1~4个值，可以是具体的数值、也可以是百分比，还可以是 left / right / top / center / bottom 等关键字。
一图胜千言，借用 张鑫旭老师《CSS 世界》的一张图：
如果缺失偏移关键字，则认为是 center。例如：bg-position:right 等同于 bg-position:right center 。是不是很简单呢？有没有思考过这个问题，使用 bg-position:right 10px bottom 10px 这个距离是相对谁的呢？ 是盒模型中的 Border Box、Padding Box 还是 Content Box？
答案是：默认情况下，bg-position是以 padding box 为准的。top left 指的是padding box 的左上角。
background-origin 可以修改 background-position 默认的基准。可以通过设置 padding 和 bg-origin 为 content-box 实现 right 10px bottom 10px 的效果。
参考张鑫旭老师博文《CSS 值简介理解background百分比定位》
开始前思考一个问题？说说 contain 与 cover的区别吗？
background-size: 用来给背景图片设置尺寸，默认 auto。可以修改图片的大小、比例和拉伸等。可取值如下：
contain: 缩放图片完全装入背景区cover：缩放图片以完全覆盖背景区auto: 按比例缩放背景图片百分比：相对背景区的百分比数值：指定大小，不能为负值效果如下图：
auto: 默认按照图片的尺寸填充容器。contain ：缩放长边可以完全显示在容器中。cover: 短边完成在容器中，完全填充容器。bg-origin 控制背景图片的延伸范围。看一张效果图：
border-box: 图片延伸到边框的下面，content-box 不包含内间距。默认情况下，背景是延伸到border的下面的。默认情况下，背景是延伸到 border 下面，要实现半透明边框需要调整背景延伸。
.box { width: 100px; height: 80px; background-color: white; border: 10px solid hsla(0, 0%, 100%, .5); background-clip: padding-box; /* 控制背景延伸 */ }效果如下：
