19.CSS background

先来说讲颜色表示法

一共有三种：单词、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
……
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)

等价于：

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

十六进制能够简化为3位，全部#aabbcc的形式，可以简化为#abc;
好比：

等价于

好比：

等价于

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

没法简化！
再好比

没法简化！

要记住：
#000 黑
#fff 白
#f00 红
#333 灰
#222 深灰
#ccc 浅灰

background-color属性表示背景颜色

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

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

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

属性值：

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

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

repeat应用案例

仍是上面那个超连接导航栏的案例，咱们给body设置平铺的图片，注意：必定找左右对称的平铺图片，才能实现咱们要的效果

 

background-position: 属性设置背景图像的起始位置。这个属性设置背景原图像（由 background-image 定义）的位置

属性值：

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

雪碧图技术（精灵图技术）

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