今天幫別人調代碼時，看到一個樣式：

background-position: 50% 0;
background-size: 100% auto；

對background-size:100% auto，意思是背景圖片寬度為元素寬度*100%，高度等比縮放。詳情可見css3 background。

對background-position很自然的以為百分比是根據父元素寬度計算的，但background-position真的不是，它有一套自己的原理。下面詳細介紹。

等價寫法

在看各類教程時有以下等價寫法：

• top left, left top 等價于 0% 0%.
• top, top center, center top 等價于 50% 0%.
• right top, top right 等價于 100% 0%.
• left, left center, center left 等價于 0% 50%.
• center, center center 等價于 50% 50%.
• right, right center, center right 等價于 100% 50%.
• bottom left, left bottom 等價于 0% 100%.
• bottom, bottom center, center bottom 等價于 50% 100%.
• bottom right, right bottom 等價于 100% 100%.

那么為什么left,top就等價于0% 0%，right bottom等價于100% 100%呢？

百分比計算公式

任何CSS屬性值為percent時，都需要根據某個參考值進行計算，搞明白這個參考值是什么，理解就容易多了。

標準規定：background-position:perenct的參考值為: (容器寬度 - 背景圖片寬度).

background-postion:x y;
x：{容器(container)的寬度—背景圖片的寬度}*x百分比，超出的部分隱藏。
y：{容器(container)的高度—背景圖片的高度}*y百分比，超出的部分隱藏。

有了這個公式，就很容易理解百分百寫法了，推算一下也就很容易理解上面各類等價寫法了。

舉例

1、background-position:center center等價于background-position:50% 50%等價于background-position:?px ?px

例子中用到背景圖如下【尺寸：200px*200px】：

背景圖在容器中居中。

<style type="text/css">
.wrap{
    width: 300px;
    height: 300px;
    border:1px solid green;
    background-image: url(img/image.png);
    background-repeat: no-repeat;
/*    background-position: 50% 50%;*/
    background-position: center center;
}
</style>
<div class="wrap">
</div>

效果都是讓背景圖片居中

如上通過設置百分比和關鍵字能實現背景圖居中，如果要實現通過具體值來設置圖片居中該設置多少？

根據上面公式：

x=(容器的寬度-背景圖寬度)*x百分比=(300px-200px)*50%=50px;

y=(容器的高度-背景圖高度)*y百分比=（300px-200px）*50%=50px;

即設置background-postion:50px 50px;

測試一下：

<style type="text/css">
.wrap{
    width: 300px;
    height: 300px;
    border:1px solid green;
    background-image: url(img/image.png);
    background-repeat: no-repeat;
/*    background-position: 50% 50%;*/
/*    background-position: center center;*/
    background-position: 50px 50px;
}
</style>
<div class="wrap">
</div>

效果同樣居中。

推算百分比：

從上面看出來，百分比為background-position-x的值 = (背景在雪碧中的左邊寬度)/(容器寬度 - 背景圖片寬度)*100%。

平常使用 background-position，一般是用固定值，比如：

.hello {
  background-position: 50px 50px; // 背景圖片左上角離包含塊左上角距離為水平方向 50px，豎直方向 50px
}

那如果上面的固定值 50px，我堅持要寫成百分比如何？

已知背景圖片大小為 150×150，包含塊大小為 200×200。

答案是：

.hello {
  background-position: 100% 100%;
}

這個值是這樣計算的：

50/(200-150)*100% = 100%

這是因為 background-position 在使用百分比時，概念跟固定取值并不一樣。

舉上面的示例說，如果設置 background-postion:10% 30%;，則是背景圖片水平方向 10% 位置的點與包含塊水平方向 10% 位置的點重合。換算成固定取值的話：

(200-50)*10% = 5

示意如下：

但如果我們使用負的百分比，則瀏覽器的處理方式又跟絕對值一樣了，比如：

.test {
  background-position: -10%, -50%;
}

就是讓背景圖片起點定位到包含塊 (-10%, -50%) 的位置。

這個概念不十分直觀，所以沒細究的話，很容易誤解。

在REM中的應用

在使用自適應時，由于數字的誤差導致了背景圖片會出現定位出現一些小偏差問題，如果可以將背景圖片通過百分比來定位，而不是默認的rem來定位，可能精準度更高點。

以上這個是一個百度分享的示例，假如需要做這種自適應，其實只要稍微分開些，使用rem也沒什么多大差別，但相對來說使用百分比可能準度更高。

HTML代碼：

	<div class="m-shareBox" id="Jbdshare_wrap">
		<p class="p_tit">分享到</p>
		<div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">
			<a class="bds_tsina" title="分享到新浪微博" href="#">新浪微博</a>
			<a class="bds_tqq" title="分享到騰訊微博" href="#">騰訊微博</a>
			<a class="bds_qzone" title="分享到QQ空間" href="#">QQ空間</a>
			<a class="bds_weixin" title="分享到微信" href="#">微信</a>
		</div>
	</div>

CSS代碼：

.m-shareBox .bdshare_t a:before{display:block; content:""; background:url(img/bdshare.png) no-repeat; background-size:cover; width:.72rem; height:.72rem; margin:0 auto .11rem;}
.m-shareBox .bdshare_t .bds_tsina:before{background-position:center 0;}
.m-shareBox .bdshare_t .bds_tqq:before{background-position:center 25%;}
.m-shareBox .bdshare_t .bds_qzone:before{background-position:center 50%;}
.m-shareBox .bdshare_t .bds_weixin:before{background-position:center 75%;}

演示：http://caibaojian.com/demo/2016/6/share.html(縮放你的瀏覽器)

也許直接使用REM定位背景更為直接和可擴展了。但別忘了，要設置你的background-size為cover或者auto 100%。使其背景跟隨內容縮放。

參考文章：

background-position百分比原理

background-position 的百分比

PS，你可能還注意到上面的分享左右兩邊跟中間不是一個寬度，那是因為我代碼沒有寫好，恰好在結一最近有提到這個問題的解決之道。我做了一下，發現無法適合上面這種多個間距的，只適合三個的。下一篇再探討這個問題。

總結

以上是生活随笔為你收集整理的CSS3背景图片百分比及应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。