CSS——bacground系列属性

1、background-color 属性

背景颜色属性，表示颜色的方法有三种：单词，rgb表示法，十六进制表示法

（1）能够用英语单词表述的颜色都是简单颜色。

例如：

红色 ：       background-color: red;  黄色 ：       background-color: yellow;

（2）rgb表示法

rgb表示三原色“红”red、“绿”green、“蓝”blue。

r、g、b，每个值取值范围0~255，一共256个值。

如果其中一个值为255，另外两个为0，那么就说明是纯色，三个值相等是灰色：

红色 ：       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(111,111,111);   值越大，灰色越浅。

（3）十六进制表示法

红色：    background-color: #ff0000;

所有用#开头的值，都是十六进制的。1十六进制表示法，也是两位两位看，看r、g、b，但是没逗号隔开。

#ff0000     中ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0);

16进制中基本数字（一共16个）:

0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f

background-color: #123456;

等价于：

background-color: rgb(18,52,86);

 任何一种十六进制表示法，都能换算成为rgb表示法。也就是说，两个表示法的颜色数量，一样。

十六进制可简化为3位，所有#aabbcc的形式的，都能简化为#abc;

比如：

background-color:#ff00ff;

等价于

background-color:#f0f;

 比如：

background-color:#112233;

等价于

background-color:#123;

要记住：

1 #000   黑 2 #fff    白 3 #f00   红     #0f0   绿    #00f   蓝 4 #333   灰 5 #222   深灰 6 #ccc   浅灰

2、 background-image属性

用于给盒子加背景图片，语句：

background-image:url(images/1.jpg);

url()表示网址，uniform resouces locator 同意资源定位符；images/1.jpg 就是相对路径。

背景默认平铺满盒子的。padding区域有背景图。

3、background-repeat属性

设置背景图是否重复，以及重复方式。

background-repeat:no-repeat;   不重复

background-repeat:repeat-x;    横向重复

background-repeat:repeat-y;    纵向重复

4、background-position属性

背景定位属性

background-position: 描述左右的词儿  描述上下的词儿;

描述左右的词儿： left、 center、right

描述上下的词儿： top 、center、bottom

1） 大背景图居中

2） 通栏banner      语句：background-position: center top;

background-position:向右移动量 向下移动量;   

移动量可以是负数。比如，向左移动120px，就相当于向右移动-120px;向上移动150px，就相当于向下移动-150px。

通常用来做“css精灵”，利用css的背景定位来显示需要显示的图片部分。

5、background-attachment属性

背景是否固定。

background-attachment:fixed;

背景就会被固定住，不会被滚动条滚走。

6、background综合属性

background属性和border一样，是一个综合属性：

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;