background的使用

先简单的介绍颜色表示法

　　一共有三种:单词,rgb表示法,十六进制表示法

　　rgb:红色 绿色 蓝色 三原色

　　光学显示器,每个像素都是有三原色的发光原件组成的,靠明亮度不同调成不同的颜色的

　　有逗号隔开,r,g,b的值,每个值取值范围0~255一共256个值

　　黑色:

　　background-color:rgb(0,0,0);

　　光学显示器,每个原件都不发光,黑色的

　　白色:

　　background-color:rgb(0,0,0);

　　颜色可以叠加,不如黄色就是红色的叠加:

　　background-color:(255,255,0)

　　再比如:

　　background-color:rgb(111,222,123)

　　就是红,绿,蓝三种颜色的不同比例叠加

　　16进制表示法

红色：

background-color: #ff0000;

所有用#开头的值，都是16进制的。

#ff0000：红色

16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。

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

怎么换算的？我们介绍一下

我们现在看一下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

16进制对应表：

十进制数    十六进制数

0    0

1    1

2    2

3    3

……

10    a

11    b

12    c

13    d

14    e

15    f

16    10

17    11

18    12

19    13

……

43    2b

……

255    ff

十六进制中，13 这个数字表示什么？

表示1个16和3个1。 那就是19。 这就是位权的概念，开头这位表示多少个16，末尾这位表示多少个1。

小练习：

16进制中28等于10进制多少？

答：2*16+8 = 40。

16进制中的2b等于10进制多少？

答：2*16+11 = 43。

16进制中的af等于10进制多少？

答：10 * 16 + 15 = 175

16进制中的ff等于10进制多少？

答：15*16 + 15 = 255

所以，#ff0000就等于rgb(255,0,0)

background-color: #123456;

等价于：

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

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

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

比如：

background-color:#ff0000;

等价于

background-color:#f00;

比如：

background-color:#112233;

等价于

background-color:#123;

只能上面的方法简化，比如

background-color:#222333;

无法简化！

再比如

background-color:#123123;

无法简化！

要记住：

#000 黑

#fff 白

#f00 红

#333 灰

#222 深灰

#ccc 浅灰

1.background-color属性表示背景颜色

2.background-img表示设置该元素的背景图片

　　name发现默认的背景图片,水平方向和垂直方向平铺

　　(需要加上no-repeat) 是取消水平和垂直方向的平铺

3.background-repeat:表示设置该元素平铺的方式

属性值:

值	描述
repeat	默认,背景图像将在垂直方向和水平方向重复
repeat-x	背景图像将在水平方向重复
repeat-y	背景图像将在垂直方向重复
no-repeat	背景图像将仅显示一次
inherit	规定应该从父元素继承 background-repeat 属性的设置

repeat引用案例

注意:一定找左右对称的平铺图片,才能实现我们要的效果

background-position:属性背景图像的起始位置,这个属性设置背景原图像(由background-image 定义) 的位置

属性值:

值	描述
top left	如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0 0；这两个值必须挨在一起。
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

雪碧图技术(精灵图技术)

CSS雪碧即CSS Sprite,也有人叫它CSS图像合并技术,该方法是将小图片和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分

CSS雪碧图应用原理

只要一张大的合并图,每一小图标节点如何显示单独的小图标?

其实雪碧图的好处:

1.利用CSS Sprites能很好地减少网页http的请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因,

2.CSS Sprites能减少图片的字节，曾经比较过多次三张图片的字节总是小于这三张图片的字节的总和

3.解决了网页设计师在图片命名上的困扰,只需对一张图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率

4.更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的方格就可以改变,维护起来更加方便

不足:

　　1.CSS雪碧的最大问题就是内存的使用

　　2.拼图维护比较麻烦

　　3.使CSS的编写变得困难

　　4.CSS雪碧调用的图片不能被打印

我们可以使用background综合属性制作通天banner,什么是通天banner呢,就是一般我们电脑的屏幕都是1439,但是设计师给我们的banner图都会比这个大

那么我们可以用这个属性制作通天banner

background:  red  url('./images/banner.jpg')  no-repeat   center top;

固定定位

background-attach

设置fixed之后,该属性固定背景图片不随浏览器的滚动而动