CSS学习笔记13：background系列属性
一、background-color属性
background-color指的是背景颜色属性。
在css2.1中，颜色的表示方法共有三种：英语单词、rgb表示法、十六进制表示法。
1.英语单词表示法
基本语法：
background-color:red;2.rgb表示法
rgb表示三原色“红”red、“绿”green、“蓝”blue。光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值。
- 红色：
background-color: rgb(255,0,0);- 绿色：
background-color: rgb(0,255,0); - 蓝色：
background-color: rgb(0,0,255);- 黑色：
光学显示器每个元件都不发光，所以是黑色的。
background-color: rgb(0,0,0);- 白色：
光学显示器每个元件都发光，白色的。
background-color: rgb(255,255,255);可以利用三原色颜色叠加理论，调出想要的色彩。比如：
- 黄色:
颜色可以叠加，比如黄色就是红色和绿色的叠加：
background-color: rgb(255,255,0);- 灰色：
当三原色的数值相同时，就是灰色。数值越小，颜色越偏黑；数值越大，越偏白。
background-color: rgb(72,72,72); 效果：
background-color: rgb(144,144,144);效果：
background-color: rgb(216,216,216);效果：
3.十六进制表示法
所有用#开头的值，都是16进制的。
红色：
background-color: #ff0000;16进制表示法，如果两位两位看，前两位是“rgb”中r的10进制化为的16进制的值，中间两位是“g”,最后两位是“b”.
如：ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0);
如何将二进制转化为16进制？
我们现在看一下10进制中的基本数字（一共10个数）:
0、1、2、3、4、5、6、7、8、9
16进制中的基本数字（一共16个数）:
0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f
10进制n转化为16进制：
n÷16=m……q （q<16）
那么 16进制表示为”mq”。
例，把10进制43转化为16进制：
43÷16=2……11（11是16进制里面的b），所以10进制43的16进制数为“2b”
16进制转化为10进制：
反过来是：
n=16×m+q
例，把16进制2b转化为10进制：
16×2+b=32+11=43
所以，任何一种十六进制表示法，都能够换算成为rgb表示法。
- 注意：
十六进制中所有#aabbcc的形式，能够简化为#abc;
比如：
background-color:#ff0000;等价于
background-color:#f00;常用的颜色16进制表示法：
- #000 黑
- #fff 白
- #f00 红
- #333 灰
- #222 深灰
- #ccc 浅灰
二、background-image
用于给盒子加上背景图片：
background-image:url(images/wuyifan.jpg);url()表示网址，uniform resouces locator 同意资源定位符
images/wuyifan.jpg 就是相对路径。
注意：
- 默认状态下，背景图的格式是平铺状态。如图：
- 盒子的padding区域也会有背景图。
三、 background-repeat属性
用来设置背景图是否重复的，重复方式的。
background-repeat属性，有三种值：
- background-repeat:no-repeat; 不重复
- background-repeat:repeat-x; 横向重复
- background-repeat:repeat-y; 纵向重复
如图：
四、background-position属性
1.background-position使用说明
（1）用数字描述：
用来给背景定位。
基本语法：
background-position:向右移动量 向下移动量;
定位属性可以是负数：
注意：
background-position:100px 100px;不能缩写成background-position:100px;- 如果写成：
background-position:100px;是什么效果？（在chrome浏览器中）
亲自做实验：
（a）先设定background-position的值为100px 100px。比较两种写法的差异：
代码:
div{
display: block;
width: 980px;
height: 520px;
border: 2px solid red;
background-image: url(http://img1.imgtn.bdimg.com/it/u=1794894692,1423685501&fm=23&gp=0.jpg);
background-color: blue;
background-position: 100px 100px;
background-repeat: no-repeat;
}实验分析如图：
background-position: 100px 100px;
background-position: 100px;
（b）分别实验试验background-position的值为30px、50px、130px、150px。发现当写成background-position: npx;时，无论n为何值，盒子都是向下移动110px。
综上所述，background-position: npx;这种写法是错误的，无法达到跟background-position: mpx npx;相同的效果。
（2）用单词描述
基本语法：
background-position: 描述左右的词儿 描述上下的词儿;描述左右的词： left、 center、right
描述上下的词： top 、center、bottom
右下角：
background-position: right bottom;左下角：
background-position: left bottom;2.CSS精灵
“css精灵”，英语css sprite，所以也叫做“css雪碧”技术。是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。
css精灵的优点：减少了http请求。比如4张小图片，原本需要4个http请求，但是用了css精灵，小图片变为了一张图，http请求只有1个了。
淘宝网的精灵图：
五、background-attachment属性
用来固定背景，基本语法：
background-attachment:fixed;使用了background-attachment，背景就会被固定住，不会被滚动条滚走。
六、background综合属性写法
综合属性写法：
background:red url(1.jpg) no-repeat 100px 100px fixed;等价于：
background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;综合属性可以任意省略一个部分，如可以只剩下某一个属性值：
background: red;