精確控制背景圖片在元素中的位置
可以把圖片設(shè)置為元素的背景，而且也能讓它鋪滿或者不鋪滿，那么我們同時也能將圖片放到一個固定的位置霎箍。
需要通過background-position用來精確控制背景 圖片在元素中的位置。
通過三種方式來確定圖片在水平方向 和垂直方向的起點稠项。
關(guān)鍵字：top right bottom left center
百分比
數(shù)值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景與偏移量</title>
<style>
.box1{
width: 1072px;
height: 560px;
background-color: red;
margin: 0 auto;
background-image: url(img/002.jpg);
background-repeat: no-repeat;
/*可以通過數(shù)值來指定相對位置*/
background-position: 50px 50px;
/*通過關(guān)鍵字來設(shè)置方向*/
/*background-position: bottom right;*/
/*background-position: left;*/
/*通過設(shè)置頁面的百分比來指定位置*/
/*background-position: 50% 50%;*/
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
注意寫對圖片的路徑升筏，不然圖片無法顯示撑柔。
背景圖片的固定
通過背景圖片的固定，我們也能實現(xiàn)猶如網(wǎng)站的購物車圖標(biāo)您访，不會隨著屏幕的滾動而變化铅忿。在設(shè)置背景圖片的時候，最好是設(shè)置在<body>內(nèi)灵汪，這樣不會因為其他元素的滾動而消失檀训。
CSS Sprite
CSS Sprites是一種網(wǎng)頁圖片應(yīng)用處理方式。
好處：
通過這種方式我們可以將網(wǎng)頁中的零星圖片集中放到一張大圖上享言，這樣只需要網(wǎng)頁發(fā)送一次請求峻凫。
一次請求便可以同時加載多張圖片，大大提高了圖片的加載效率览露，提高了訪問效率荧琼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按鈕</title>
<style type="text/css">
/*如果我們在不同的狀態(tài)時，傳入三張圖片肛循，那么在點擊時會閃爍铭腕，而且瀏覽器請求次數(shù)增加银择，每次都得傳入圖片多糠，增加傳輸速度。*/
/*不寫圖片的位置的時候浩考，就是傳入了固定的位置
而且加載了三次夹孔，降低訪問次數(shù)，增加流量析孽。
*/
/*只寫圖片位置的時候搭伤，就是傳入了一張整合過得圖片
通過移動圖片的位置來顯示我們所需要的樣子*/
.btn:link{
display: block;
width: 93px;
height: 29px;
background-image:url(img/btn.png);
background-repeat: no-repeat;
}
.btn:hover{
background-position: -93px 0px;
/*background-image: url(img/hover.png);*/
}
.btn:active{
background-position: -186px 0px;
/*background-image: url(img/active.png);*/
}
</style>
</head>
<body>
<a href='#' class="btn"></a>
</body>
</html>
上面代碼中，要么寫圖片路徑在hover 和 acitve中不寫位移袜瞬，那這就是傳入三次圖片怜俐，要么就是不寫路徑，通過傳入一張整合以后的圖片邓尤，來進(jìn)行移動拍鲤，實現(xiàn)我們想要看到的效果。提交加載速度汞扎。
