在前端開(kāi)發(fā)中，顯示圖片是一個(gè)必不可少的功能。而在這里，我們要介紹的是如何使用 CSS 來(lái)進(jìn)行圖片定位。

.background {
background-image: url('bg.jpg');
background-position: center;
background-repeat: no-repeat;
}

上述是我們最簡(jiǎn)單的一個(gè)圖片定位的示例。其中url()中填寫你需要顯示的圖片，background-position可選值有left、center、right、top、bottom等，以及可以搭配像素值。而background-repeat:表示圖片不重復(fù)，即只顯示一次。

接下來(lái)是一個(gè)使用 CSS 來(lái)進(jìn)行圖片精靈的示例。

.sprites {
background-image: url('sprites.jpg');
}
.sprite1 {
width: 50px;
height: 50px;
background-position: -10px -10px;
}
.sprite2 {
width: 60px;
height: 40px;
background-position: -70px -20px;
}
.sprite3 {
width: 70px;
height: 30px;
background-position: -140px -30px;
}

上述代碼中，我們將多個(gè)小圖標(biāo)合并成一張大圖（稱之為圖片精靈），然后通過(guò)background-position來(lái)指定所需要的圖標(biāo)位置，這樣可以減少 HTTP 請(qǐng)求的數(shù)量，加快頁(yè)面的加載速度。

除此之外，我們還可以利用 CSS 來(lái)實(shí)現(xiàn)圖片大小調(diào)整和圖片轉(zhuǎn)化為背景圖的功能。

img {
width: 100%;
height: auto;
}
.image-bg {
background-image: url('cat.jpg');
background-size: cover;
width: 300px;
height: 200px;
border: 1px solid black;
}

上述代碼中，width: 100%;表示將圖片的寬度自適應(yīng)容器的大小，而高度會(huì)根據(jù)寬度做相應(yīng)調(diào)整；background-size:的 cover 表示圖片可以鋪滿整個(gè)容器，因此可以作為背景圖使用。最后，我們可以將 CSS 中定義的圖片樣式應(yīng)用到 HTML 中的元素中，即

<img src="xxx.jpg" class="resize">
<div class="image-bg"></div>

可以根據(jù)需要來(lái)選擇合適的方式。