背景圖片 如果背景圖片小於當前的div的情況下
默認的是將平鋪充滿元素
background-image 設置背景圖片。
background-repeat 設置是否及如何重復背景圖片。
repeat 默認的是都重復
repeat-x 背景圖像在水平方向重復
repeat-y 背景圖片在垂直方向重復
no-repeat 背景圖片僅僅顯示一次。
background-position 設置背景圖像的開始位置。
可能的值為： top left x% y% 設置背景圖片的在元素中的位置
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
該屬性 可以使用 top center bottom left right 中的兩個值指定背景圖片的位置。
一個值 默認第二個值為center
background-position:100px 100px;
background-attachment: 設置背景圖片是否固定或者隨着頁面的其余部分滾動。
scroll 默認值。背景圖片會隨着頁面其余部分的滾動而滾動。
fixed 當頁面的其余部分滾動時，背景圖像不會滾動。
當背景圖片的background-attachment 為 fixed 背景圖片的定位永遠相當於瀏覽器的窗口
多個圖片進行加載的時候，最好通過ps放到同一張圖片中
做完功能后，第一次切換圖片時，會發現圖片有個快的閃爍
這個閃爍造成一次不佳的用戶體驗。
產生問題的原因。
背景圖片是以外部資源的形式加載進網頁的，瀏覽器每加載一個外部資源
就需要單獨的發送一次請求。外部資源不是同時記載的。當資源使用的時候
才會去加載資源。
.btn:link{
display:block;
width:93px;
height:29px;
background-image:url(img/btn/link.png);
/*設置背景圖片不重復*/
background-repeat:not-repeat;
}
.btn:hover{
background-image:url(img/btn/hover.png);
}
.btn.active{
background-image:url(img/btn/active.png);
}
為了解決這個問題，整合為一張圖片，可以同時將三張圖片一起加載，就不會出現閃爍的問題。
然后通過background-position:切換要顯示切換圖片的位置;
圖片整合技術 CSS-Sprite
使用三張圖片會出現這種情況，
把三種情況的圖片放到一個圖片里面
background-position:-50px 0;
background-position:-100px 0;
總結 ： 通過一個樣式的屬性設置
background:#bfa url(img/3.png) center center no-repeat fixed;