靈活的背景定位

原文出處：http://www.w3cplus.com/css3/css-secrets/flexible-background-positioning.html

問(wèn)題

我們經(jīng)常遇見(jiàn)的一個(gè)問(wèn)題就是，需要將背景圖片定位到不同的位置，往往不僅是左上角，比如右下角。在 CSS 2.1 中，只能指定圖片相對(duì)左上角的偏移量，或者使用關(guān)鍵字定位到其他的角落。不過(guò)，通常希望在背景圖片和邊角之間保留一些空間，避免類下圖的效果。

因?yàn)閳D像和邊緣之間沒(méi)有間隔，所以?background-position: bottom right;?實(shí)現(xiàn)的效果通常并不美觀

對(duì)于具有固定尺寸的容器，在 CSS 2.1 中是可以解決這個(gè)問(wèn)題的，但是使用的技術(shù)比較雜亂：我們需要計(jì)算出背景圖片相對(duì)左上角的偏移量，模擬出背景圖片和左下角之間的間隙。但是，對(duì)于尺寸不固定的元素（由于內(nèi)容不固定導(dǎo)致的尺寸不固定），這種方法就無(wú)能為力了。開(kāi)發(fā)者通常喜歡使用百分比設(shè)置背景位置，通常是略小于?100%?的值，比如?95%。當(dāng)然，使用最新的 CSS，我們對(duì)這個(gè)問(wèn)題有更優(yōu)雅的解決方法。

解決方案:增強(qiáng)型?background-position

在?CSS Backgrounds & Borders Level 3?中，增強(qiáng)型的?background-position?屬性已經(jīng)開(kāi)始支持針對(duì)每個(gè)邊角的偏移量了，開(kāi)發(fā)者需要做的就是在偏移量之前加上邊角的信息。比如，如果我們想要背景圖片距離右側(cè)邊界?20px，距離底部邊界?10px，那么就可以這么做：

background: url(code-pirate.svg) no-repeat #58a;
background-position: right 20px bottom 10px;

完成后的效果如下圖所示：

不同的邊上指定偏移量，如圖所示的虛線輪廓

最后需要做的就是設(shè)置降級(jí)措施。目前，大多數(shù)的瀏覽器尚不支持新式的?background-position?語(yǔ)法，雖然編寫了上述代碼，在某些瀏覽器背景圖片仍然會(huì)被定位到左上角，看起來(lái)非常難看，并且遮擋住部分文字,如下圖所示效果:

如果我們不希望低版本瀏覽器的用戶看到這樣的效果，就需要提供一種降級(jí)處理

一個(gè)簡(jiǎn)單降級(jí)方式是在?background?縮寫屬性中添加定位屬性?bottom right?：

background: url(code-pirate.svg)
            no-repeat bottom right #58a;
background-position: right 20px bottom 10px;

解決方案:background-origin

通常，我們只需要給容器添加內(nèi)邊距就可以模擬背景圖片和邊界之間的偏移。如果使用上一節(jié)講述的?background-positon?來(lái)做這件事，那么代碼就會(huì)像這樣：

padding: 10px;
background: url(code-pirate.svg) no-repeat #58a;
background-position: right 10px bottom 10px;

最終效果如下圖所示：

為背景圖添加的偏移量正好等于內(nèi)邊距的值

如你所見(jiàn)，效果還不錯(cuò)，但是這些代碼并不夠簡(jiǎn)潔：如果需求發(fā)生變化需要修改代碼，那么我們需要修改三處代碼才能完成。所幸還有一種簡(jiǎn)單的方式可以代替它，無(wú)需重復(fù)聲明內(nèi)邊距即可讓背景圖片根據(jù)內(nèi)邊距調(diào)整偏移量。

在你的web開(kāi)發(fā)生涯中，你可能會(huì)寫許多次類似?background-position: top left;?的屬性。那么你是否思考過(guò)：哪里是左上角（top-left corner）?或許你已經(jīng)知道了，每一個(gè)元素都有四個(gè)盒模型（如下圖所示）：外邊距盒模型（margin box）、邊框盒模型（border box）、內(nèi)邊距盒模型（padding box）以及內(nèi)容盒模型（content box）。那么 background-position 中所指的 top left 指的是哪一個(gè)盒模型呢？

實(shí)際上，background-position默認(rèn)上值得就是內(nèi)邊距盒模型，所以邊框最終遮蓋了背景圖片。因此，top left?默認(rèn)上指的就是內(nèi)邊距盒模型的左上角。不過(guò)在?Backgrounds & Borders Level 3?中，我們擁有了新的屬性用來(lái)改變這種默認(rèn)行為：background-origin。你可能已經(jīng)猜測(cè)到了 ，它的默認(rèn)值也是?padding-box。如果我們就像下面的代碼一樣=將其更改為?content-box，那么?background-pisition?就會(huì)將content-box?視為背景圖片的存在范圍（實(shí)際上，這意味著所有的背景圖片將會(huì)根據(jù)內(nèi)邊距實(shí)現(xiàn)和邊框的偏移）：

padding: 10px;
background: url("code-pirate.svg") no-repeat #58a
            bottom right; /* or 100% 100% */
background-origin: content-box;

現(xiàn)在視覺(jué)效果和前面示例相同了，不過(guò)更勝一籌的是現(xiàn)在的代碼更簡(jiǎn)潔。一定要牢記，如有需要你可以將上述的兩種方法組合起來(lái)使用。如果你想使用不同的內(nèi)邊距，同時(shí)又想讓其向外突出或向內(nèi)嵌入，那么就可以組合使用?background-origin: content-box?和?background-position。

解決方案:calc()

讓我們重新審視一下我們遇到的挑戰(zhàn)：我們需要將背景圖片定位到離右邊框?20px、離底部邊框?10px的位置。不過(guò)，使用這樣解決方案，我們需要將其視為從左上角的偏移量，所以可以視為在水平方向偏移?100% - 20px、在垂直方向偏移?100% - 10px。所幸的是，calc()?函數(shù)就可以幫我們完成這種計(jì)算，并且可以完美地融入?background-position?屬性：

background: url("code-pirate.svg") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);

在?calc()?中，不要忘記在加減號(hào)操作符左右添加空格，否則就會(huì)發(fā)生解析錯(cuò)誤！這種奇怪的規(guī)則是為了兼容性：因?yàn)樵谖磥?lái)，calc()?中可能會(huì)允許使用關(guān)鍵字，而這些關(guān)鍵字中就有可能會(huì)包含連字符。

總結(jié)

在 CSS 2.1 中，只能指定圖片相對(duì)左上角的偏移量，或者使用關(guān)鍵字定位到其他的角落。如果需要讓背景圖距離元素四邊距有一定的偏移量，相對(duì)而言是較為麻煩。在這篇文章中，作者通過(guò)background-position新特性、修改background-origin以及calc()函數(shù)等三種方法，實(shí)現(xiàn)了一種靈活型的背景圖定位。希望這篇文章對(duì)大家有所幫助。