通過這篇文章我要教大家解決一個曾經很困擾我的麻煩問題。我們要使用百分比的 background-position值來解決一些問題。
通常使用方法
- 擺放圖片 通常在容器裡擺放圖片是給出具體圖片的
top、left相對容器的top、left的值。
- 在CSS中很容易做到。
123* 在容器裡使用`<img>`標籤.container{
</pre> position:relative; } .container img{ position:absolute; top:12px; left:20px; }
12* 或者可以使用`background-position`<pre>`.container{
background-position:12px 20px; }` - 在容器裡移動現在你想讓圖片在容器裡面移動而且還不能超出容器邊界。你肯定是要簡單算一算圖片
top、left的最大值。
然後得到left值的範圍是 0 到container_width - image_width，同樣也可以得到top值的範圍。 - 圖片比容器大到目前為止，我們討論的問題都很簡單。現在，我們要看看圖片比容器大的情況。容器必須要被圖片填滿。
同樣我們可以算出left值的範圍是 0 ~container_width - image_width，只不過這次container_width - image_width是負值。你可以搞明白正值和負值的關係，也可以憑直覺搞定。當你看到12px 20px你很容易知道圖片是怎麼放置的。但是，你看到-12px -20px就比較難想明白了。 - 不變數好了，現在你已經寫好了位置點並且沒有任何問題。現在，因為某些原因，我們不用長方形容器了，用正方形容器。那麼之前的那些位置值就不那麼合適了。我們之前計算的值不再有效，因為現在情況變了。你想要改變圖片和容器大小也是一樣的道理。
可以從圖中看到，如果使用固定的值，那麼一旦改變某些條件，那麼就可能會讓已經寫好的佈局亂掉。
背景圖片的百分比方法
- 定義我們要換一個確定圖片位置的方法了。當圖片的左邊框和容器的左邊框挨著時，
left是0%。當圖片右邊框和容器的右邊框挨著時，left是100%。這兩個例子分別就是 0% 和 100% 的情況：
我們很容易得到兩者之間的值
1`left = (container_width - image_width) * percentage
- 範圍檢測這個方法最方便的就是我們不用再算圖片相對容器的範圍。它就是 0 ~ 100 。
- 不變數我們畫兩個軸，一個對於容器，一個對於圖片。如果我們設定值為
60%，則兩個軸的60%會重合在一個點上。
就像上面的圖片一樣，這個新的方法在不同比例大小情況下也工作得很好。 - 水平和垂直如果你細心的話你會注意到圖片和容器一樣大的話，兩個軸會完全重合。設定 30% 還是 80% 都不重要。
再看看數學公式
1`left = (container<em>width - image_width) </em> percentage = 0 _ percentage = 0
你只需要設定兩個值left、top就行了。
總結
一開始，我沒有明白百分比值是怎麼對background-position作用的。我真的有點迷惑，因為使用百分比讓我不能直觀地感受到變化。然而，後來我發現使用百分比解決圖片定位是極其方便的。
我的部落格，歡迎訂閱
微博粉絲太少，求粉