2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

一、background-position賦值時(shí)的等價(jià)寫法

1、top left, left top 等價(jià)于 0% 0%.

2、top, top center, center top 等價(jià)于 50% 0%.

3、right top, top right 等價(jià)于 100% 0%.

4、left, left center, center left 等價(jià)于 0% 50%.

5、center, center center 等價(jià)于 50% 50%.

6、right, right center, center right 等價(jià)于 100% 50%.

7、bottom left, left bottom 等價(jià)于 0% 100%.

8、bottom, bottom center, center bottom 等價(jià)于 50% 100%.

9、bottom right, right bottom 等價(jià)于 100% 100%.

?

二、背景圖像定位中我們要明確的幾點(diǎn)

?

1、兩個(gè)值前面一個(gè)是橫向的定位，我們稱為x軸方向定位。后面一個(gè)值是縱向的定位，我們稱為y軸方向定位。

? ? 如果只有一個(gè)值，那默認(rèn)的就是x軸方向，

? ? 這時(shí)y軸方向就默認(rèn)的是上下居中對(duì)齊，也就是center。

?

2、坐標(biāo)軸的原點(diǎn)就是對(duì)應(yīng)容器的左頂點(diǎn)。

3、這個(gè)坐標(biāo)的y軸箭頭朝下，也就是右下方（容器內(nèi)部）x y的值才都為正。

4、x y值分別表示背景圖片的左頂點(diǎn)相對(duì)于坐標(biāo)原點(diǎn)（也就是容器的左頂點(diǎn)）的值。

5、x y的值可以用百分比或者px來表示。

?

6、x y也可以用“l(fā)eft、right、top、bottom、center”這五個(gè)對(duì)齊方式來表示，

? ? 但注意：用“l(fā)eft、right、top、bottom、center”來表示的時(shí)候，應(yīng)用的是對(duì)齊規(guī)則，而不是坐標(biāo)規(guī)則。

? ? x為left是表示圖片的左邊和容器的左邊對(duì)齊，為right的時(shí)候表示圖片的右邊和容器的右邊對(duì)其，

? ? y為top的時(shí)候表示圖片的頂部和容器的頂部對(duì)齊，

? ? 為bottom時(shí)表示圖片的底部和容器的底部對(duì)齊，x y等于center的時(shí)候表示居中對(duì)齊。

?

7、x y用百分比或者px表示的時(shí)候，其值可以為負(fù)數(shù)。我們應(yīng)用坐標(biāo)規(guī)則就很容易理解負(fù)數(shù)表示的意義，

? ? x為負(fù)數(shù)時(shí)候表示圖片左頂點(diǎn)在容器左頂點(diǎn)的左側(cè)，

? ? y為負(fù)數(shù)時(shí)表示圖片的左頂點(diǎn)在容器的左定點(diǎn)的上方。也就是向左和向上超出容器的范圍。

?

參考資料：?background-position的使用 ?http://www.studyofnet.com/news/960.html

轉(zhuǎn)載于:https://my.oschina.net/u/2428791/blog/504857

總結(jié)

以上是生活随笔為你收集整理的CSS中background-position的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。