背景圖片 如果背景圖片小於當前的div的情況下預設的是將平鋪充滿元素background-image 設置背景圖片。background-repeat 設置是否及如何重覆背景圖片。 repeat 預設的是都重覆 repeat-x 背景圖像在水平方向重覆 repeat-y 背景圖片在垂直方向重覆 no ...
背景圖片 如果背景圖片小於當前的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;
