blockground

颜色的表示方法 

一共有三种：单词、rgb表示法、十六进制表示法

　　rgb:红色 绿色 蓝色　　

三原色光学显示器，每一个像素都是由三原色的发光原件组成的，靠明亮度不一样调成不一样的颜色的。用逗号隔开，r、g、b的值，每一个值的取值范围0~255，一共256个值。
若是此项的值，是255，那么就说明是纯色：

黑色：
光学显示器，每一个元件都不发光，黑色的。

白色：

颜色能够叠加，好比黄色就是红色和绿色的叠加：

再好比：
就是红、绿、蓝三种颜色的不一样比例叠加。

　　16进制表示法　　

红色：
全部用#开头的值，都是16进制的。
#ff0000：红色
16进制表示法，也是两位两位看，看r、g、b，可是没有逗号隔开。
ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。因此等价于rgb(255,0,0);
怎么换算的？咱们介绍一下
咱们如今看一下10进制中的基本数字（一共10个）:
0、一、二、三、四、五、六、七、八、9

16进制中的基本数字（一共16个）:
0、一、二、三、四、五、六、七、八、九、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         (2*16+b(b=11))
……
255 ff         (15*16+15)

十六进制中，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)

等价于：

因此，任何一种十六进制表示法，都可以换算成为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 浅灰

    back-ground  属性表示背景颜色       

    background   表示设置该元素的背景图片    

    那么发现默认的背景图片,水平发现和垂直发现都平铺

     background-repect    表示设置该元素平铺的方式      

       属性值:

 给元素设置padding以后，发现padding的区域也会平铺背景图片。

精灵图技术

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

CSS 雪碧图应用原理：
只有一张大的合并图， 每一个小图标节点如何显示单独的小图标呢？

其实就是 截取 大图一部分显示，而这部分就是一个小图标。

使用雪碧图的好处：

一、利用CSS Sprites能很好地减小网页的http请求，从而大大的提升页面的性能，这也是CSS Sprites最大的优势，也是其被普遍传播和应用的主要缘由； 
二、CSS Sprites能减小图片的字节，曾经比较过屡次3张图片合并成1张图片的字节老是小于这3张图片的字节总和。 
三、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就能够了，不须要对每个小元素进行命名，从而提升了网页的制做效率。 
四、更换风格方便，只须要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就能够改变。维护起来更加方便

 

不足：

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以后，该属性固定背景图片不随浏览器的滚动而滚动