标签：
文章同步至微信公众号：http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401626453&idx=1&sn=6af07474df847d251358c4b453eaddfd#wechat_redirect
感兴趣的可以扫码关注哈：
background-position这个样式规则，切页面的同学应该都用过。关于其详细介绍，就不再赘述了。http://www.cnblogs.com/huazaizai/archive/2010/11/03/1867907.html这篇博客已经把background-position相关知识点描述的很详细了。
当我们把backgrund-position的值设置为百分数的时候，那么背景图的位置是怎么计算的呢？当我们指定background-position:50% 50%的时候，实际上效果等同于backgrund-position：center center。它的计算规则为：
x:{容器(container)的宽度—背景图片的宽度}*x百分比，超出的部分隐藏。
y:{容器(container)的高度—背景图片的高度}*y百分比，超出的部分隐藏。
为了清楚的表示这一点，下面举了两个栗子。
首先有这么一张图片它的宽高为：510*382
然后请看下面这段代码：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.wrapper {
width: 300px;
height: 300px;
border: 2px solid red;
background-image: none;
}
</style>
</head>
<body>
<div class="wrapper"></div>
</body>
</html>
它的实际效果为
这正如期望的效果那样。当我们设置background-position:50% 50%的时候，运行效果就是下面的这样：
按照上文中的背景图的位置的计算公式x:(300-510)*50%=-105；y:(300-382)*50%=-41。
这就是我在这篇博客想表达的当background-position指定为百分数时候的情景。然而，知道这个有神马用呢？毛主席就曾教导我们说学习的目的全在于应用。就算你理论知识掌握的再多，不知道什么地方能用到，不知道其使用场景那也是没有价值的。
在做移动端的页面的时候，我们会想办法去适配各种不同屏幕大小的屏幕。这个问题，在pc端，有些时候，同样要考虑。然而这跟background-position又有神马关系？当我们在做有些活动页面的时候，对于那些铺满一整屏的页面，backgroundposition就能派上用场了。
对于pc端的活动页面，设计师出的设计稿的大小一般都是基于1920px的宽度。其内容器往往只有1000px或1200px的大小居中。假设内容区大小为1000px入下图
为了让页面能在1000px宽度以上的各个浏览器中都能良好的显示，这是就backgrundposition出场的时候了。
我通常的做法就是body {background: url(bg.jpg) 50% 0 no-repeat}
.content {
widh: 1000px
margin-left: auto;
margin-right: auto;
overflow: hidden；
}
我们把设计稿的背景图做成宽度为1920宽度的背景图设计为body的背景图，位置设置为:50% 0。这样只要是屏幕在1000px像素以上都能良好显示。而且还是自适应的。这条是笔者自己的做的页面的业务需求关于backgroundposition的用法。如果您还知道其它的相关的使用场景或用法欢迎分享交流。
标签：
原文地址：http://www.cnblogs.com/submerge/p/5178120.html
