CSS3背景圖的定位技巧

我們還假設了一種情況，就是我們不知道這樣元素或頁面的寬度和高度，通常，流式佈局頁面和動態內容頁面都是這種情況。在這種情況下，如果要實現上面描述的需求，我們需要運用一些數學技巧來計算背景圖片的偏移量，但仍然是使用background-position語法。

觀看演示

這種背景設計需求其實是很常見，我們有好幾種方法能實現這個需求。

使用background-position的四個值語法

這是最簡單的方法。你可以在值中使用 top/right/bottom/left 四個預定義關鍵字。例如：

background-position: right 20px bottom 10px;

這樣，你就指定了距離右邊20px，底部10px;

至於瀏覽器支援情況, 根據MDN：Chrome 25+, Firefox 13+, IE 9+, Opera 10.5+, Safari/iOS 7+。最大的問題是安卓。

我測試過 Android 4.0, 4.1 和 4.2，都不行。 Android 4.4 沒問題。

使用 calc()

如果堅持使用2個值的background-position語法，我們需要使用calc()。比如：

background-position: calc(100% - 20px) calc(100% - 10px); 

這種寫法的瀏覽器支援情況稍微好一些，谷歌瀏覽器19+, Firefox 4+ 和 Safari 6+ (全部需要使用瀏覽器引擎字首)。

安卓原生瀏覽器對它的支援跟4值語法一樣。

使用JavaScript

如果你希望能夠相容所有瀏覽器，我估計這最後的方法就是使用JavaScript了。獲取元素的高度和寬度，獲取背景圖片的尺寸，然後用CSS調整。

使用jQuery:

例項演示

所有三種技術的演示

觀看演示