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;