- 精確控制背景圖片在元素中的位置
可以把圖片設(shè)置為元素的背景呐伞，而且也能讓它鋪滿或者不鋪滿，那么我們同時(shí)也能將圖片放到一個(gè)固定的位置慎式。
需要通過(guò)background-position用來(lái)精確控制背景 圖片在元素中的位置伶氢。
通過(guò)三種方式來(lái)確定圖片在水平方向 和垂直方向的起點(diǎn)。
關(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;
/*可以通過(guò)數(shù)值來(lái)指定相對(duì)位置*/
background-position: 50px 50px;
/*通過(guò)關(guān)鍵字來(lái)設(shè)置方向*/
/*background-position: bottom right;*/
/*background-position: left;*/
/*通過(guò)設(shè)置頁(yè)面的百分比來(lái)指定位置*/
/*background-position: 50% 50%;*/
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
注意寫(xiě)對(duì)圖片的路徑瘪吏，不然圖片無(wú)法顯示癣防。
背景圖片的固定
通過(guò)背景圖片的固定，我們也能實(shí)現(xiàn)猶如網(wǎng)站的購(gòu)物車圖標(biāo)掌眠，不會(huì)隨著屏幕的滾動(dòng)而變化蕾盯。在設(shè)置背景圖片的時(shí)候，最好是設(shè)置在<body>內(nèi)蓝丙，這樣不會(huì)因?yàn)槠渌氐臐L動(dòng)而消失刑枝。
CSS Sprite
CSS Sprites是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式。
好處：
通過(guò)這種方式我們可以將網(wǎng)頁(yè)中的零星圖片集中放到一張大圖上迅腔，這樣只需要網(wǎng)頁(yè)發(fā)送一次請(qǐng)求装畅。
一次請(qǐng)求便可以同時(shí)加載多張圖片，大大提高了圖片的加載效率沧烈，提高了訪問(wèn)效率掠兄。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按鈕</title>
<style type="text/css">
/*如果我們?cè)诓煌臓顟B(tài)時(shí)，傳入三張圖片，那么在點(diǎn)擊時(shí)會(huì)閃爍蚂夕，而且瀏覽器請(qǐng)求次數(shù)增加迅诬，每次都得傳入圖片，增加傳輸速度婿牍。*/
/*不寫(xiě)圖片的位置的時(shí)候侈贷，就是傳入了固定的位置
而且加載了三次，降低訪問(wèn)次數(shù)等脂，增加流量俏蛮。
*/
/*只寫(xiě)圖片位置的時(shí)候，就是傳入了一張整合過(guò)得圖片
通過(guò)移動(dòng)圖片的位置來(lái)顯示我們所需要的樣子*/
.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>
上面代碼中上遥，要么寫(xiě)圖片路徑在hover 和 acitve中不寫(xiě)位移搏屑，那這就是傳入三次圖片，要么就是不寫(xiě)路徑粉楚，通過(guò)傳入一張整合以后的圖片辣恋，來(lái)進(jìn)行移動(dòng)，實(shí)現(xiàn)我們想要看到的效果模软。提交加載速度伟骨。
