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以後，該屬性固定背景圖片不隨瀏覽器的滾動而滾動