background-position的使用方法及詳細(xì)介紹

時(shí)間：2022-05-29 15:09:01 | 來源：網(wǎng)絡(luò)營銷

時(shí)間：2022-05-29 15:09:01 來源：網(wǎng)絡(luò)營銷

background屬性是CSS中最常見的屬性之一，它是一個(gè)簡寫屬性，其包含background-color、background-image、background-repeat、background-attachment、background-position、background-clip、background-origin和background-size。

你可能會(huì)說，這些屬性再簡單不過了，沒有可講的。這篇文章接下來要介紹的不是所有有關(guān)于background里面的屬性，而是說說background-position屬性。在詳細(xì)介紹background-position之前，先要問大家，你真的了解這個(gè)屬性嗎？言外之意，接下來介紹是你所不了解的background-position相關(guān)細(xì)節(jié)。

1、你所知道的background-position

background-position 屬性設(shè)置背景圖像的起始位置。

background-position是用來控制元素背景圖片的位置。它接受三種值：

關(guān)鍵詞，比如top、right、bottom、left和center

長度值，比如px、em、rem等

百分值%

大家最常用的是值也可以說最了解的值是關(guān)鍵詞和長度值，當(dāng)然百分比也會(huì)使用，然而百分比使用最多的是0%、50%和100%。

來看一個(gè)簡單的例子：

將效果圖截取做一個(gè)簡單的分析：

圖片上的標(biāo)注信息已經(jīng)告訴大家很詳細(xì)的信息了。示例中容器具備下述特性：

div容器尺寸410px x 210px，邊框?qū)挾?0px；

容器背景圖尺寸100px x 100px

第一張背景圖background-position:10px 10px；第二張背景圖background-position: center

其中黑白格子尺寸是10px x 10px

很正常的一些特性，也可以說是熟悉不過的特性。那么下面，我們來聊點(diǎn)大家不為所知的background-position。

2、你所不知道的background-position

前面也說過了，background-position取值除了長度值（<length>）和關(guān)鍵詞之外，還可以取值為百分比值。當(dāng)然大家也使用過百分比值，比如：

body { background-position: 100% 0% } /* right top */
body { background-position: 50% 0% } /* top center */
body { background-position: 50% 50% } /* center */
body { background-position: 50% 100% } /* bottom */

那么問題來了，你真的了解background-position取值為百分比的計(jì)算比例嗎？如果我的百分比值不是和關(guān)鍵詞對等的值呢？那么它是怎么計(jì)算的？這一系列的問題，你是否有仔細(xì)的思考過。就我個(gè)人而言，我以前所理解也存在一個(gè)誤區(qū)：

我一直理解的background-position百分比值，它是相對于背景圖片的尺寸。

但事實(shí)上，這種理解是一種錯(cuò)誤。這也是今天踩的坑發(fā)現(xiàn)的。然后立馬查了一下相關(guān)的規(guī)范文檔，才徹底的搞清楚。那接下來，咱們就來聊background-position取值為百分比的計(jì)算方式。

W3C規(guī)范是這樣描述的：

A percentage for the horizontal offset is relative to (width of background positioning area - width of background image). A percentage for the vertical offset is relative to (height of background positioning area - height of background image), where the size of the image is the size given by ‘background-size’.

也就是說，當(dāng)背景圖片尺寸（background-size）不做任何的重置（也就是100% 100%）時(shí)，水平百分比的值等于容器寬度百分比值減去背景圖片寬度百分比值。垂直百分比的值等于容器高度百分比值減去背景圖片高度百分比值。

比如前面的示例，如果取值background-position: 75% 50%;，背景圖片的起始位置：

水平位置（x軸）：(410 - 100) * 75% = 232.5px

垂直位置（y軸）：(210 - 100) * 50% = 55px

通過一個(gè)Gif圖來描述其對應(yīng)的效果：

示例中兩個(gè)div，其中第一個(gè)div的background-position使用的是px值，第二個(gè)div的background-position使用的是%。

第一個(gè)div的background-position的值從0px 0px到232.5px 55px

第二個(gè)div的background-position的值從0% 0%到75% 50%

根據(jù)規(guī)范，以及前面的計(jì)算，不難發(fā)現(xiàn)第二個(gè)div的background-position位置相同。用張草圖來描述，大家更易明白其中的含義：

上面介紹的是background-position取值為百分比值的計(jì)算方式。接下來再介紹一個(gè)background-position未來將具有的特性。就是可以顯式的通過關(guān)鍵詞指定背景圖片距離容器的位置。比如：

background-position: left 10px top 15px; /* 10px, 15px */
background-position: left top ; /* 0px, 0px */
background-position: 10px 15px; /* 10px, 15px */
background-position: left 15px; /* 0px, 15px */
background-position: 10px top ; /* 10px, 0px */
background-position: left top 15px; /* 0px, 15px */
background-position: left 10px top ; /* 10px, 0px */

只不過瀏覽器暫時(shí)還不支持此特性，但我想為來有一天我們在實(shí)際的項(xiàng)目中可以使用上。

3、案例解析：CSS中的背景圖片定位方法

CSS中的背景圖片定位方法有三種：

（1）、關(guān)鍵字定位：background-position：top left；

（2）、像素定位：background-position：x px y px；

（3）、百分比定位：background-position：x% y%；

其中，1、2都是將背景圖左上角的原點(diǎn)放置在規(guī)定的位置，x，y軸相當(dāng)于坐標(biāo)的兩個(gè)值。百分比定位的放置規(guī)則是：圖片本身（x% y%）的那個(gè)點(diǎn)與背景區(qū)域的（x% y%）的那個(gè)點(diǎn)重合。

一個(gè)例子（最后會(huì)附上我的解法）：

背景圖片是如圖左的四個(gè)邊長為100px的方塊，想要將其橫過來：

代碼如下：

<div class = "div1"></div>
<div class = "div2"></div>
<div class = "div3"></div>
<div class = "div4"></div>

.div1, .div2, .div3, .div4{
float: left;
width: 100px;
height: 100px;
position: relative;
background: url(xxxx.png) no-repeat;
}

.div1{background-position: 0% 0%;}
.div2{background-position: 0% 33.33%;}
.div3{background-position: 0% 66.67%;}
.div4{background-position: 0% 100%;}

background-position的值可以用方程來解釋：

每個(gè)div的背景圖相對于背景區(qū)域的位置就如圖所示。對于div1，背景圖片的左上角和區(qū)域左上角重合，故x，y值均為0；

對于div2：背景圖片的縱向比區(qū)域縱向高100px，即 400*y - 100*y = 100px => y = 1/3 = 33.33%

對于div3：背景圖片的縱向比區(qū)域縱向高200px，即 400*y - 100*y = 200px => y = 2/3 = 66.67%

對于div4：背景圖片的縱向比區(qū)域縱向高300px，即 400*y - 100*y = 300px => y = 1 = 100%

4、案例擴(kuò)展

除了背景背景平鋪外，CSS還提供了另一個(gè)強(qiáng)大的功能，即背景定位技術(shù)，能夠精確控制背景在對象中的位置。

語法：

background-position : length || length
background-position : position || position

取值：

length : 百分?jǐn)?shù) | 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長度值。請參閱 長度單位

position : top | center | bottom | left | center | right

說明：

設(shè)置或檢索對象的背景圖像位置。必須先指定 background-image 屬性。

該屬性定位不受對象的補(bǔ)丁屬性( padding )設(shè)置影響。

默認(rèn)值為： 0% 0% 。此時(shí)背景圖片將被定位于對象不包括補(bǔ)丁( padding )的內(nèi)容區(qū)域的左上角。

如果只指定了一個(gè)值，該值將用于橫坐標(biāo)?？v坐標(biāo)將默認(rèn)為 50% 。如果指定了兩個(gè)值，第二個(gè)值將用于縱坐標(biāo)。

如果設(shè)置值為 right center ，因?yàn)?right 作為橫坐標(biāo)值將會(huì)覆蓋 center 值，所以背景圖片將被居右定位。

對應(yīng)的腳本特性為 backgroundPosition。

注：本文中使用的圖片大小為 300px*120px，為了能很清晰的表達(dá)圖形的哪部分被隱藏了，按照圖片的大小平均分成了9等份。同時(shí)背景圖片容器區(qū)域繪制出綠色邊框清晰顯示容器的范圍。

①、background-position:0 0;

背景圖片的左上角將與容器元素的左上角對齊。該設(shè)置與background-position:left top;或者background-position:0% 0%;設(shè)置的效果是一致的。例如：

.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 0 0;
border:5px solid green;
}

效果如下圖：

②、該屬性定位不受對象的補(bǔ)丁屬性( padding )設(shè)置影響

例如，我們給容器元素增加padding值，背景圖片的左上角還是與容器元素的左上角對齊。在此處只是影響到了容器元素的高度和寬度。

.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 0 0;
border:5px solid green;
padding:50px;
}

效果如下圖：

③、background-position:-70px -40px;

圖片以容器左上角為參考向左偏移70px，向上偏移 40px，示例：

.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll -70px -40px;
border:5px solid green;
}

效果如下圖：

④、background-position:70px 40px;

圖片以容器左上角為參考向右偏移70px，向下偏移 40px，示例：

.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 70px 40px;
border:5px solid green;
}

效果如下圖：

⑤、background-position:50% 50%;

圖片水平和垂直居中。與 background-position:center center;效果等同。

等同于x：{容器(container)的寬度—背景圖片的寬度}*x百分比，超出的部分隱藏。

等同于y：{容器(container)的高度—背景圖片的高度}*y百分比，超出的部分隱藏。

.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 50% 50%;
border:5px solid green;
}

其x=(300-210)*50%=45px;

y=(150-120)*50%=15px;

效果如下圖：

由于超出部分別往兩端延伸，所以我們可以先制作一張寬度足夠?qū)拡D片設(shè)置水平值為50%，這樣可以用來適應(yīng)不同的瀏覽器，使得圖片水平充滿瀏覽器窗口并且居中。替代margin:50 auto的功能。

⑥、background-position:-50% -50%;

等同于x：-{容器(container)的寬度—背景圖片的寬度}*x百分比，超出的部分隱藏。

等同于y：-{容器(container)的高度—背景圖片的高度}*y百分比，超出的部分隱藏。

.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll -50% -50%;
border:5px solid green;
}

效果如下圖：

⑦、background-position:100% 100%;

圖片處于容器元素的右下角，與 background-position:right bottom;效果等同。

示例：

.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 100% 100%;
border:5px solid green;
}

效果如下圖：

5、background的多種屬性詳解

css的background屬性由以下屬性組成：

background-color：背景色

background-image：背景圖片

background-size：背景圖片尺寸

background-repeat：背景圖片重復(fù)(repeat,repeat-x,repeat-y,no-repeat)

background-position：背景圖片位置

background-attachment：背景圖片是否固定不動(dòng)

background-clip：背景覆蓋區(qū)

background-origin：背景圖片覆蓋區(qū)

其中比較常用的是：

background-color：背景色

background-image：背景圖片

background-repeat：背景圖片重復(fù)

background-position：背景圖片位置

background-color

顏色名稱，如：background-color:red;

十六進(jìn)制背景色，如：background-color:#ff0000; / background-color:#f00;

rgb顏色，這里如果是rgba，a表示透明程度，為0全透明，為1全顯示，如：background-color:rgb(255,0,0); / background-color:rgba(0,0,255,0.8);

transparent，透明，如：background-color:transparent;

background-image

url圖片地址，可以多個(gè)圖片，如：background-image: url(img/a.jpg),url(img/b.jpg);

none，不顯示背景圖像

background-repeat

repeat：水平和垂直方向都重復(fù)圖像，如：background-repeat: repeat;

repeat-x：水平方向重復(fù)圖像

repeat-y：垂直方向重復(fù)圖像

no-repeat：圖像不重復(fù)

background-position

位置名字組合定位，只寫一個(gè)默認(rèn)另一個(gè)為居中，如：background-position: right bottom; / background-position: center;

百分比位置，如：background-position: 20% 20%;

具體像素位置， 如：background-position: 20px 20px;

background-attachment

scroll：背景圖像相對于頁面不動(dòng)，會(huì)隨著網(wǎng)頁的滾動(dòng)而移動(dòng)，默認(rèn)

fixed：背景圖像相對于瀏覽器窗口不動(dòng)，內(nèi)容滾動(dòng)的時(shí)候背景圖像不動(dòng)，如：background-attachment: fixed;

background-size

像素大小，只寫一個(gè)默認(rèn)另一個(gè)為auto，如：background-size: 200px 100px;

百分比大小，如：background-size: 60% 60%;

cover：背景圖像覆蓋當(dāng)前元素的所有背景區(qū)域，如：background-size: cover;

contain：圖像顯示最大且剛好完全顯示，一般不能覆蓋全部背景區(qū)

background-clip

border-box：背景覆蓋到邊框區(qū)域，如：background-clip: border-box;

padding-box：背景覆蓋到padding區(qū)域

content-box：背景只覆蓋到content部分

background-origin

border-box：背景圖像的起始位置在邊框處，如：background-origin: border-box;

padding-box：背景圖像的起始位置從padding處開始

content-box：背景圖像的起始位置從content處開始

億企邦點(diǎn)評：

平時(shí)在很多開發(fā)者眼中，CSS是非常的容易。沒有任何的技術(shù)價(jià)值，但事實(shí)上并非如此，如果真正去探究的話，CSS還有很多有意思的東西。比如這篇文章，我想有很多開發(fā)者跟我一樣，并沒有把如此簡單的一個(gè)CSS屬性搞明白，搞徹底。最好希望大家能保持一顆探究的心，不斷的去探究你想探索的任何知識(shí)。