14-background

1、background-color:設置該元素的背景顏色

一共有三種：單詞、rgb表示法、十六進制表示法

一、rgb:紅色 綠色 藍色 三原色

光學顯示器，每一個像素都是由三原色的發光原件組成的，靠明亮度不一樣調成不一樣的顏色的。
用逗號隔開，r、g、b的值，每一個值的取值範圍0~255，一共256個值。
若是此項的值，是255，那麼就說明是純色：

黑色：
background-color: rgb(0,0,0);
光學顯示器，每一個元件都不發光，黑色的。

白色：
background-color: rgb(255,255,255);

顏色能夠疊加，好比黃色就是紅色和綠色的疊加：
background-color: rgb(255,255,0);

好比紅、綠、藍三種顏色的不一樣比例疊加。
background-color: rgb(111,222,123);

二、16進製表示法

全部用#開頭的值，都是16進制的。
background-color: #ff0000;：紅色

16進製表示法，也是兩位兩位看，看r、g、b，可是沒有逗號隔開。
ff就是10進制的255，00就是10進制的0。因此等價於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 淺灰

三、透明度

rgba:
A：Alpha透明度。取值0~1之間。
此色彩模式與RGB相同，只是在RGB模式上新增了Alpha透明度。
IE6.0-8.0不支持使用 rgba 模式實現透明度，可以使用IE濾鏡處理

十六進制透明度

00表示徹底透明，FF就是全不透明，化成十進制的範圍就是0~255，剩下的 RRGGBB 就是顏色的十六進制代碼。

舉例如：background: rgba(125, 0, 0, .3); 表示的是30%不透明度的紅色背景。把30%的不透明度轉換成十六制呢的方法以下：先計算#AA的的十進制x，x/255 = 3/10，解得x=3*255/10，而後再把x換算成十六進制，約等於4C。

經常使用透明度對應16進制關係：
.0（00） .1（19） .05（0C） .15（26）
.2（33） .3（4C） .25（3F） .35（59）
.4（66） .5（7F） .45（72） .55（8C）
.6（99） .7（B2） .65（A5） .75（BF）
.8（CC） .9（E5） .85（D8） .95（F2）

2、background-img:設置該元素的背景圖片

語法

background-image: url("bg_pic.jpg");

默認背景圖片，水平方向和垂直方向都平鋪

3、background-repeat

設置該元素平鋪的方式

屬性值：
repeat 　　   默認。背景圖像將在垂直方向和水平方向重複。
repeat-x 　　背景圖像將在水平方向重複。
repeat-y 　　背景圖像將在垂直方向重複。
no-repeat 　 背景圖像將僅顯示一次。
inherit           規定應該從父元素繼承 background-repeat 屬性的設置。

給元素設置padding以後，發現padding的區域也會平鋪背景圖片。

4、background-position

背景圖像的起始位置

屬性值：

5、雪碧圖技術（精靈圖技術）

CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合併技術，該方法是將小圖標和背景圖像合併到一張圖片上，而後利用css的背景定位來顯示須要顯示的圖片部分

CSS 雪碧圖應用原理：

只有一張大的合併圖， 每一個小圖標節點如何顯示單獨的小圖標呢？
其實就是截取大圖一部分顯示，而這部分就是一個小圖標。

使用雪碧圖的好處：

一、利用CSS Sprites能很好地減小網頁的http請求，從而大大的提升頁面的性能，這也是CSS Sprites最大的優勢，也是其被普遍傳播和應用的主要緣由。
二、CSS Sprites能減小圖片的字節，曾經比較過屢次3張圖片合併成1張圖片的字節老是小於這3張圖片的字節總和。
三、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就能夠了，不須要對每個小元素進行命名，從而提升了網頁的製做效率。
四、更換風格方便，只須要在一張或幾張圖片上修改圖片的顏色或樣式，整個網頁的風格就能夠改變，維護起來更加方便。

不足：

一、CSS雪碧的最大問題是內存使用
二、拼圖維護比較麻煩
三、使CSS的編寫變得困難
四、CSS 雪碧調用的圖片不能被打印

6、通天banner

什麼是通天banner呢，就是通常咱們電腦的屏幕都是1439，可是設計師給咱們的banner圖都會比這個大，
那麼可使用background綜合屬性來製做通天banner。

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

設置fixed以後，該屬性固定背景圖片不隨瀏覽器的滾動而滾動