background是CSS的简写属性，包含了数个属性集。 其可以用来设置一个或多个属性：
- background-color
- background-image
- background-position
- background-repeat
- background-size
- background-attachment
有一些我们是很熟悉的，比如b-color、b-image等，也有生疏的如b-attachment。这篇文章就浅显的整体了解一下这个CSS属性。
background-color
初始值：background-color: transparent;
定义：CSS属性中的background-color会设置元素的背景色，属性的值为颜色值或关键字“transparent”，二者选其一。
是否继承属性：否
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
margin-top: 10px;
width: 80px;
height: 50px;
}
.a {
background-color: red;
}
.b {
background-color: #bbff00;
}
.c {
background-color: rgb(255,255,128)
}
.d {
background-color: hsla(50,33%,25%,0.75);
/*Hue(色调) Saturation(饱和度) lightness(亮度) Alpha(透明度)*/
}
.e {
background-color: transparent;
border: solid 1px black;
}
/*Special keyword values*/
.f {
background-color: currentcolor;
}
.g {
border: solid 1px black;
}
/*继承*/
.Inherit {
width: 200px;
height: 50px;
background-color: orange;
}
.test {
width: 50px;
height: 50px;
background-color: inherit;
border: solid 1px red;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e">transprent</div>
<div class="f"></div>
<div class="Inherit">
<div class="test"></div>
</div>
</body>
</html>
这里要注意一个very special的keyword：
background-color: currentColor;
引用张鑫旭大神的文章：currentColor-CSS3超高校级好用CSS变量
CSS currentColor变量的使用
currentColor
- 关键字代表原始的属性的计算值。它允许让继承自属性或子元素的属性颜色属性以默认值不再继承。
- 它也能用于那些继承了元素的属性计算值的属性，相当于在这些元素上使用
inherit关键字，如果这些元素有该关键字的话。
————MDN
background-image
image属性用于为一个元素设置一个或者多个背景图像。图像在绘制时，以z方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像最接近用户。
然后元素的borders会在它们之上被绘制，而background-color会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系，需要在CSS属性background-clip和background-origin中定义。
如果一个图像无法被绘制（比如，URL表示的文件无法被加载），浏览器会将此情况等同于其值被设定为none。
——————MDN
是否继承：否
MDN的话翻译成“人话”（其实很严谨2333）就是：
- 如果存在多个background-image，则先指定的会排在后指定的前面。
- border的绘制在image和URL之上。
- color只有在image出现问题的时候，才会用上。（比如image url error）
PS：新发现，假设此时有主副两个background-image，且也有background-color，如果主image出现错误，导致主背景image无法显示，并不会切换至副image，此时等同于background-image: none;，所以会直接显示background-color，注意（其实这也是MDN定义中的一句话）。
background-size
设置图片大小，主要注意单位。
-
background-size: cover;
-
background-size: contain;
可以看到，容器尺寸不变，但是图片缩小了。按照MDN解释，应是在原图片比例不变情况下，填充容器，因为默认是repeat的，所以余下部分重复填充。
关键词：比例不变
-
background-size: auto;
这也是默认情况下的值，这里就略过吧。
-
background-size: /*一个值*/
当值有且只有一个时，表示图片的宽度，图片的高度隐式的为auto。
<style>
.container {
width: 300px;
height: 300px;
border: solid 1px red;
background-image: url(img/1.jpg);
background-repeat: no-repeat;
}
.b {
background-size: 50%;
}
.c {
background-size: 3em;
}
.d {
background-size: 12px;
}
.f {
background-size: auto;
}
</style>
</head>
<body>
<div class="b container"></div>
<div class="c container"></div>
<div class="d container"></div>
<div class="f container"></div>
</body>
PS：
.f的蓝色是原图的左上角
-
background-size: /*两个值*/;
第一个值指定图片的宽度，第二个值指定图片的高度
<style>
.container {
width: 300px;
height: 300px;
border: solid 1px red;
background-image: url(img/1.jpg);
background-repeat: no-repeat;
}
.b {
background-size: auto 50%;
}
.c {
background-size: 50% auto;
}
.d {
background-size: 3em 25%;
}
.f {
background-size: 25% 3em;
}
</style>
</head>
<body>
<div class="b container"></div>
<div class="c container"></div>
<div class="d container"></div>
<div class="f container"></div>
</body>
-
background-size: /*逗号分隔的多个值：设置多重背景*/;
<style>
.container {
width: 600px;
height: 600px;
border: solid 1px red;
background-image: url(img/1.jpg),url(img/5.jpg),url(img/7.jpg);
background-repeat: no-repeat;
}
.b {
background-size: 25%,50%,70%;
}
.c {
background-size: 50% 100%,100% 50%,100% 100%;
}
</style>
</head>
<body>
<div class="b container"></div>
<div class="c container"></div>
<!--<div class="d container"></div>
<div class="f container"></div>-->
</body>
css3实现一个div设置多张背景图片及background-image属性
background-repeat
background-repeat
属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
repeat
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.universal {
width: 200px;
height: 200px;
background-size: 70px 70px;
background-image: url(img/7.jpg);
margin-top: 10px;
}
.a {
background-repeat: repeat-x;
/*图像会按需重复来覆盖整个背景图片所在的区域. 最后一个图像会被裁剪, 如果它的大小不合适的话*/
}
.b {
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div class="a universal"></div>
<div class="b universal"></div>
</body>
</html>
如果容器恰好合适图片重复的尺寸则没啥问题，不合适的话，最后的重复图片会被裁剪。最后一张图于是被裁剪了10像素，变为60像素，于是200px=70px*2+60px.
space
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.universal {
width: 200px;
height: 200px;
background-size: 70px 70px;
background-image: url(img/7.jpg);
margin-top: 10px;
}
.a {
background-repeat: space;
}
.b {
background-repeat: repeat-x space;
}
.c {
background-repeat: space repeat-y;
}
</style>
</head>
<body>
<div class="a universal"></div>
<div class="b universal"></div>
<div class="c universal"></div>
</body>
</html>
对于space属性值，背景图片会现在容器头和尾放置图片，再根据头尾之间空隙来插入图片。
round
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.universal {
width: 200px;
height: 200px;
background-size: 70px 70px;
background-image: url(img/7.jpg);
margin-top: 10px;
}
.b {
background-repeat: round repeat-x: ;;
}
.c {
background-size: 80px 80px;
background-repeat: round no-repeat;
}
.d {
background-size: 80px 80px;
background-repeat: repeat-x repeat-y;
}
</style>
</head>
<body>
<div class="b universal"></div>
<div class="c universal"></div>
<div class="d universal"></div>
</body>
</html>
主要在图片是怎么被压缩的，规则是什么。
no-repeat
图像不会被重复(因为背景图像所在的区域将可能没有完全被覆盖). 那个没有被重复的背景图像的位置是由
code略
background-origin
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
margin-top: 10px;
}
.b {
background-repeat: no-repeat;
background-image: url(img/test.jpg);
width: 200px;
height: 200px;
border: dashed 10px red;
background-origin: border-box;
}
.c {
background-repeat: no-repeat;
background-image: url(img/test.jpg);
width: 200px;
height: 200px;
border: dashed 10px red;
background-origin: content-box;
padding: 50px;
}
.d {
background-repeat: no-repeat;
background-image: url(img/test.jpg);
width: 200px;
height: 200px;
border: dashed 10px red;
background-origin: padding-box;
padding: 50px;
}
.e {
width: 200px;
height: 200px;
border: dashed 10px red;
background-color: orange;
}
</style>
</head>
<body>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</body>
</html>
关于background-clip和background-origin的关系可以看看这篇文章：
无双：css3属性中background-clip与background-origin的用法释疑
background-attachment
如果指定了
background-image，那么background-attachment决定背景是在视口中固定的还是随包含它的区块滚动的。
background-attachment
fixed
此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
此种背景固定方式经常用于图版率较高的页面设计中，很多大公司如Apple等，在产品展示页就是采用这种设计。
scroll
此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）
代码就不放了，乱七八糟的。
scroll就是默认情况下的设置，背景图随着元素的滚动而滚动，这样可以给背景图片一个很高的高度，充当BGI，也是一种很正常的使用方法。
这里有一点要注意：
对于元素本身可以滚动的情况下，取值local和scroll情况各有不同。
local：滚动时，背景会随元素滚动而滚动。
scroll：滚动时，背景不会随元素滚动而滚动。
local
此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
对于可以滚动的元素（设置为overflow:scroll的元素）,设置background-attachment:local，则背景会随内容的滚动而滚动。
因为背景图是相对于元素自身内容定位，开始固定，元素出现滚动条后背景图随内容而滚动。
这就是上面提到的了。
这里略过。
