這篇文章主要介紹了css中怎么設(shè)置背景圖片位置，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供三亞網(wǎng)站建設(shè)、三亞做網(wǎng)站、三亞網(wǎng)站設(shè)計(jì)、三亞網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、三亞企業(yè)網(wǎng)站模板建站服務(wù)，10余年三亞做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

什么是css

css是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言，主要是用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的樣式，使網(wǎng)頁(yè)更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁(yè)，也可以配合各種腳本對(duì)于網(wǎng)頁(yè)進(jìn)行格式化。

在css中，可以使用background-position屬性來(lái)設(shè)置背景圖片位置，該屬性可以設(shè)置背景圖像的起始位置，進(jìn)行背景圖片的定位。background-position屬性需要有兩個(gè)值，分別控制水平和垂直方向上的定位。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

在css中，可以使用background-position屬性來(lái)設(shè)置背景圖片位置，進(jìn)行背景圖片的定位。

在CSS中，背景圖片的定位方法有3種：

1）關(guān)鍵字：background-position: top left;

2）像素：background-position: 0px 0px;

3）百分比：background-position: 0% 0%;

上面這三句語(yǔ)句，都將圖片定位在背景的左上角，表面上看效果是一樣的，實(shí)際上第三種定位機(jī)制與前兩種完全不同。

前兩種定位，都是將背景圖片左上角的原點(diǎn)，放置在規(guī)定的位置。請(qǐng)看下面這張圖，規(guī)定的位置是"20px 10px"和"60px 50px"，都是圖片的原點(diǎn)在那個(gè)位置上，圖中用X表示。

但是第三種定位，也就是百分比定位，不是這樣。它的放置規(guī)則是，圖片本身（x%,y%）的那個(gè)點(diǎn)，與背景區(qū)域的（x%,y%）的那個(gè)點(diǎn)重合。比如，如果放置位置是"20% 10%"，實(shí)際結(jié)果如下圖，可以看到這個(gè)點(diǎn)是在圖片本身的"20% 10%"的位置上。

下面是一個(gè)有趣的例子。

背景圖片是四個(gè)邊長(zhǎng)為100px的方塊疊在一起：

請(qǐng)問怎樣才能將其橫過(guò)來(lái)：

答案是，在網(wǎng)頁(yè)中先設(shè)置四個(gè)div區(qū)域：