background系列属性

1、background-color背景颜色属性

　　①颜色表示方法

　　　　英语单词：red   blue   purple    skyblue。

　　　　rgb：r代表红色   g代表绿色   b代表蓝色    也就是颜色的三原色。

　　　　十六进制：#0xff ff ff

2、background-image属性

　　background-image:url(images/i.jpg);背景天生是会被平铺满的。

3、background-repeat属性

　　background-repeat:no-repeat;控制background-image里的图片不是平铺满，而是只出现一次。

　　background-repeat:repeat-x;控制background-image里的图片不是平铺满，而是横向重复。

　　background-repeat:repeat-y;控制background-image里的图片不是平铺满，而是纵向重复。

4、要妙用repeat这个属性    用小图做大背景

5、background-position背景定位属性（重点）

　　　　　　　　　　　　　　   X            Y

　　①background-position:向右移动量 向下移动量;               移动量可以是负数  例如：

　　②css精灵：又叫css雪碧技术，是一种css图像合并技术。该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

　　Css精灵有什么优点，就是减少了http请求。比如4张小图片，原本需要4个http请求。但是用了css精灵，小图片变为了一张图，http请求只有1个了。

　　③用单词表示：background-position:描述左右的单词    描述上下的单词。比如：background-position:center top;左右居中  上下居顶。

用途：大背景图的溢出处理。

　　这个属性经常用于图片比浏览器大得多的时候，但是我们还想让图片居中的时候，这个时候就需要background-position去定位一下，利用center属性就能搞定。例如暗黑破坏神 台湾的官网背景图。

　　这个属性还有用于通栏banner图。其实这个banner图是一个超长的图。

6、background-attachment属性

　　这个属性设置为fixed，作用就是用于背景图（没有设置no-repeat的背景图）不随着滚动条滚动，但是表层的文字可以随着滚动条的滚动而滚动。

7、background综合属性

　　background:red url(1.jpg) no-repeat 100px 100px fixed;

　　等价于：

　　background-image:url(1.jpg);

　　background-repeat:no-repeat;

　　background-position:100px 100px;

　　background-attachment:fixed;