經(jīng)過(guò)幾天大腦短路，今天終于自動(dòng)修復(fù)成功。迫不及待的來(lái)寫(xiě)個(gè)隨筆紀(jì)念一下。話不多說(shuō) 進(jìn)入正題：

　　這兩天忙里偷閑仔細(xì)研究了下background-position圖片定位的問(wèn)題，之前自己都不清楚是怎么一回事，現(xiàn)在來(lái)分享一下到底是怎么一回事。

　　背景圖片定位（background-position）原理

　　I. 語(yǔ)法：Background-position:水平位置 垂直位置

　　II. 水平位置/垂直位置設(shè)置方法：

　　1） 數(shù)值（px）正負(fù)值都可以，正數(shù)值表示向右移動(dòng)或向下移動(dòng)，負(fù)數(shù)值表示向左或向上移動(dòng)；

　　2） 百分比（%）范圍：0%—100%

　　3） 關(guān)鍵詞：水平位置：left(左) center(中) right(右)? 垂直位置：top(上) center(中) bottom(下)

　　默認(rèn)情況下，background-position的原點(diǎn)位于左上角，換句話說(shuō)，元素的左上角和圖片的左上角是對(duì)齊的，隨后圖片向各個(gè)方向重復(fù)，都是以左上角為起點(diǎn)。

　　注意：當(dāng)只設(shè)置一個(gè)值時(shí)：代表水平位置，垂直位置默認(rèn)居中

　　學(xué)無(wú)止境，我們需要學(xué)習(xí)的太多太多，有時(shí)候我們可以稍微放緩一下腳步，沉淀一下我們的知識(shí)，加深一下理解，會(huì)更加的有趣。

　　知識(shí)是一種快樂(lè)，好奇則是知識(shí)的萌芽。加油！

轉(zhuǎn)載于:https://www.cnblogs.com/H-Gfeng/p/10428263.html

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的拨开云雾见月明的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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