拨开云雾见月明
經(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é)
- 上一篇: 做一个登入页面
- 下一篇: EOJ Monthly 2019.2 (