1.background-position 方案
它允許我們指定背景圖像距離任意角的偏移量翠勉，只要我們?cè)谄屏壳懊嬷付P(guān)鍵字妖啥。然而它在默認(rèn)狀態(tài)下是這樣的：
為什么背景圖片的位置是邊框內(nèi)呢？
答案是：默認(rèn)情況下对碌，
background-position 是以padding-box 為準(zhǔn)的荆虱，這樣邊框才不會(huì)遮蓋背景圖片。
當(dāng)我們給它指定偏移量的時(shí)候，例如:
background:url(xxx.jpg ) no-repeat #C4D9E6;
background-position: right 20px bottom 20px;
背景圖片將被指定到右下角怀读，跟右邊緣保持20px的偏移量诉位，跟底邊保持20px的偏移量。
*如果只規(guī)定了一個(gè)關(guān)鍵詞菜枷，那么第二個(gè)值將是"center"苍糠。
然而，在不支持
background-position屬性的瀏覽器中啤誊，背景圖片會(huì)回到默認(rèn)位置椿息。會(huì)干擾到文字的可讀性。于是坷衍，需要提供一個(gè)回退方案寝优，把 bottom right定位值寫到background屬性里面。
background:url(xxx.jpg ) no-repeat bottom right #C4D9E6;
background-position: right 20px bottom 20px;
2.background-origin 方案
它規(guī)定 background-position 屬性相對(duì)于什么位置來(lái)定位枫耳。
語(yǔ)法：background-origin: padding-box|border-box|content-box;
padding:10px;
background:url(xxx.jpg ) no-repeat bottom right #C4D9E6;
background-origin: content-box;
默認(rèn)情況下乏矾，背景圖片通過(guò) padding-box 定位，如果把它的值改成content-box迁杨，那么圖片距離邊角的偏移量就跟內(nèi)邊距一樣了钻心。
3.calc() 方案
語(yǔ)法：calc() = calc(四則運(yùn)算)
用于動(dòng)態(tài)計(jì)算長(zhǎng)度值。
任何長(zhǎng)度值都可以使用calc()函數(shù)進(jìn)行計(jì)算铅协；
calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算捷沸；
calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級(jí)規(guī)則；
在第一種方案中狐史，我們想要把背景圖片定位到距離底邊20px, 且距離右邊20px的位置痒给。如果我們?nèi)匀?strong>以左上角偏移的思路來(lái)思考，起始就是希望它有一個(gè) 100%-20px 的水平偏移骏全，以及100%-20px 的垂直偏移苍柏。所以我們可以把 calc() 函數(shù)在background-position 屬性中使用：
background:url(xxx.jpg ) no-repeat #C4D9E6;
background-position: calc(100% - 20px) calc(100% - 20px) ;
*需要注意的是，運(yùn)算符 "-" 前后都需要保留一個(gè)空格姜贡，例如：width: calc(100% - 10px)试吁；
參考書籍：Lea Verou《CSS揭秘》
