---恢复内容开始---
今天看了一下<css权威指南>，回想起前几天看的<css 揭秘>，发现background这个属性使用频率很高，并且属性也比较多，于是我决定仔细看一下这个属性，今天写一下background的基本概念和用法。
首先来了解一下background是哪些属性的缩写：
- background-color
- background-image
- background-position
- background-origin
- background-clip
- background-repeat
- background-size
- background-attachment
没错是8个属性的缩写，下面，一个一个看看这些属性。
1.background-color
这个属性是规定元素背景色的
1 body {
2 background: #ccc; /* 规定body的背景为#ccc */
3 }
这个属性使用的时候注意点：
1.和其他属性混用的时候，要放在最后面，作为备用属性
2.background-image
这个属性用于给元素插入背景图片，特别要注意的是，<Gradient>产生的是一个图片，而不是background-color
使用定义：
1 background-image： <image>: [<url> | <linear-gradient> | <radial-gradient>]
html代码如下：
<div id="box"></div>
css代码：
#box {
display: block;
width: 200px;
height: 200px;
border: 1px solid black;
background-image: url("background/boats.png"); /* 此处使用url */
}
效果如下：
注意点：
- background-image可以同时插入多张图片，使用 “,”（逗号）分开，然后使用background-position来决定各个图片在元素中的位置
- 使用background-color时最后后面写上background-color,防止图片意外没有加载，使用background-color作为fallback
1 #box { background-image: url("1.jpg"), url("2.jpg"), url("3.jpg"); background-position: top left, center center, bottom 10px right 10px; /* 后面介绍 */ background-repeat: no-repeat; background-color: blue; /* as fallback */}
3.background-position
可以使用的值有：
- 使用关键字<keywords>: top, right, bottom, left, center
- 使用百分比<percentage>,如30%,50%
- 使用<values>,如4em 30px...
注意点：
-
- 初始值 0% 0%，即元素的top left位置
- 只有一个值时，如background-position： top; 另一个值默认为 center（或 50%），即 background-position：center top；
- 混合使用关键字，百分比，数值时应当先写水平方向的值，然后写垂直方向的值
#box{ background-position: right 10px; /* 表示在右边（水平方向），离元素上边界10px(垂直方向) */background-position: 10px right;/* 错误写法 被忽略此属性 */
}
- 当使用keywords表示时，书写比较自由
#box { background-position: top left; /* 可以不用考虑先写水平还是垂直方向的值 */ background-position： top 30px right 30%; /* 甚至可以使用多个值表示 但不能不能使用center作参考 */ } - 这个值是相对于background-origin设置的区域
4. background-origin
这个属性是规定背景图片的初始位置，共有3个值
- border-box
- padding-box (默认值)
- content-box
注意点，与background-clip区别
5.background-clip
这个属性规定图片可绘制区域，也有3个值
- border-box(默认值)
- padding-box
- content-box
#box {
display: block;
width: 400px;
height: 400px;
padding: 50px;
background-image: url(background/boats.png);
background-repeat: no-repeat;
background-origin: padding-box;
-webkit-background-clip: content-box; /* clip区域比图片起始位置origin小的情况 */
-moz-background-clip: content-box;
background-clip: content-box;
background-color: yellow;
border: 1px solid black;
}
可以看到图片只有部分显示出来，因为可绘制区域为content-box(background-clip)，而图片要出现的起始位置要在padding-box(background-origin)
6.background-repeat
这个值一看就通俗易懂，是规定是否复制的，有以下几个值：
- repeat x,y轴都复制
- repeat-x
- repeat-y
- space 这个值表示在给定轴（axis）上一个图片能够复制多少次，自动给一个常规的间距，x,y方向的间距可以不一样，可以改写background-position属性
- round 这个值表示复制背景图片时，自动对图片进行缩小或放大, 这个值不能改写background-position属性
示例：
#box {
display: block;
width: 400px;
height: 400px;
padding: 50px;
background-image: url(background/boats.png);
background-repeat: space; /* round */
background-color: yellow;
border: 1px solid black;
}
1.space
2.round
7.background-size
这个属性比较有意思，也比较重要
定义：<background-size>: [<length> | <percentage> | auto]{1,2} | cover | contain
注意点：
- 初始值(即默认值)为 auto
- 百分比<percentage>值的大小是针对background-origin区域，而不是background-clip区域
解释一下这条：比如background-origin：padding-box, background-clip: border-box;background-size: 25% 50%;表示： 图片宽是元素padding-box的宽度值的25%， 高度是padding-box的50%
- 当只写一个auto值时，表示水平和垂直方向都是auto
- auto和<length>混合写的时候，如 background-size: auto 30px;
假设图片固有属性宽高为 200px * 100px (宽高比为2：1)有以下几种情况 1.auto值计算出为 30px*2 = 60px 2.auto值计算失败 则auto自动变为图片默认的宽度值： 200px 3.第1，2步都失败，auto = 100%,这种情况矢量图出现的比较多，如SVG,<Gradient>图片
- cover 就是覆盖填充整个绘制区域
#box {display: block;
width: 400px;
height: 400px;
background-image: url(background/boats.png);background-size: cover;
background-color: yellow;
border: 1px solid black;}
- contain 通过自动缩小或放大把整个图片能够完整的包含进去
#box {display: block;
width: 40px;
height: 40px;
background-image: url(background/boats.png);
background-repeat: no-repeat;
background-size: contain;background-color: yellow;
border: 1px solid black;}
8.background-attachment
这个值比较简单，就是将图片在滚动条存在的时候，是固定不动，还是跟一起滚动，两个属性值：
- scroll (默认值)
- fixed
background综合属性
注意点：
- 所有的background子属性都不继承
- 书写综合属性时，background-position要写在background-size前面，并用“/”隔开
#box { background: url(1.jpg) repeat-y top left / 50% 50% fixed padding-box border-box yellow;} 可以写为 #box { background-image: url(1.jpg); background-repeat: repeat-y; background-position: top left; background-size: 50% 50%; background-attachment: fixed; background-origin: padding-box; background-clip: border-box; background-color: yellow;} - background-origin属性要写在background-clip属性前面,如2
最后发张图，下一次一起学习一下linear-gradient和radial-gradient
---恢复内容结束---