文章同步至微信公众号：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的用法。如果您还知道其它的相关的使用场景或用法欢迎分享交流。

background-position还可以这样用的更多相关文章

  1. html5+css3中的background: -moz-linear-gradient 用法

    在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. background: -moz-linea ...

  2. html5+css3中的background: -moz-linear-gradient 用法 (转载)

    转载至-->http://www.cnblogs.com/smile-ls/archive/2013/06/03/3115599.html 在CSS中background: -moz-linea ...

  3. css3的Background新属性

    前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...

  4. CSS3 Gradient 渐变

    转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...

  5. jQuery视差滚动插件，（附原理分析，调用方法）

    演示地址:http://www.jq22.com/jquery-info1799 jquery插件,使用验证过可用. 分析源代码后总结原理:设置background样式为fixed,判断浏览器滚动距离 ...

  6. CSS3 Gradient

    CSS3CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步.虽然如此但还是有很多朋友在钻研C ...

  7. CSS 笔记一（Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width）

    Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width CSS Introduction: CSS stands for ...

  8. JQuery_过滤选择器

    一.基本过滤器 1.基本过滤器 过滤器主要通过特定的过滤规则来筛选所需的 DOM 元素,和 CSS 中的伪类的语法类似:使用冒号(:)开头. <script type="text/ja ...

  9. CSS3 线性渐变（linear-gradient） 兼容IE8,IE9

    一.线性渐变在 Mozilla 下的应用     语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, ...

  10. 不用任何图片，只用简单的css写出唯美的钟表，就问你行吗？

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAGHCAIAAABJR31QAAAgAElEQVR4nOy9aXhc1ZUurPvcH7f73n ...

随机推荐

  1. Linux:加载硬盘

    在腾讯云购买了一个云服务器,送了20G的系统盘,购买了一个50G的数据盘. 第一次进入系统后,通过镜像中自带的脚本,挂载数据盘. 后来重装了系统,进入系统后查看硬盘信息.

  2. 擦掉STM32F429芯片上的数据的一个方法

    刚入手一块STM32F429Discovery.手痒痒的,准备写个程序进去.一不小心,把MCU的调试接口SW.JTAG全部给禁用了.这下可坏了,写不进去程序,擦不掉数据.愁的某家一头大汗.突然想起了当 ...

  3. 免费SVN空间

    推荐免费的svn空间(SVN代码托管) 最近研究了国内和国外的免费svn空间,SVN代码托管,SVN在线,代码托管中心,有所心得. 1.http://www.svn999.com/ [推荐]国内的,免 ...

  4. 关于面向切面编程Aspect Oriented Programming(AOP)

    最近学到spring ,出来了一个新概念,面向切面编程,下面做个笔记,引自百度百科. Aspect Oriented Programming(AOP),面向切面编程,是一个比较热门的话题.AOP主要实 ...

  5. 从委托到Lambda

    写下这篇文章的时候已经是工作三年,突然发现自己从始至终都没有学习过任何东西,突然想学点东西又不知道从何而写那只能一个个基础重新学习. 委托 什么是委托? 委托是一个类,它定义了方法的类型,使得可以将方 ...

  6. 让reddit/r/programming炸锅的一个帖子，还是挺有意思的

    这是原帖 http://www.reddit.com/r/programming/comments/358tnp/five_programming_problems_every_software_en ...

  7. C#委托理解(个人观点)

    前言: 根据百度百科字面意思是:把事情托付给别人或别的机构(办理/处理), 我们就按汉字意思来理解; 再罗嗦一点通俗一点就是:当某人发生什么事情后把处理这个事情的工作托付给别人或别的机构(办理/处理) ...

  8. python 核心编程课后练习(chapter 5)

    5-2 #5-2 def mul(x, y): return x * y print mul(4,5) 5-3 #5-3 def value_score(num): if 90<=num< ...

  9. Lucene.net 多条件查询搜索

    最近一直在研究lucene,目的是想让网站实现像搜索引擎那样的搜索,可以快速.准确的帮用户查询出想要的结果.废话不多说,上代码实例: 1.利用BooleanQuery进行多条件搜索(比较灵活)   L ...

  10. org.springframework.dao.InvalidDataAccessApiUsageException: Parameter value [41] did not match expected type [java.lang.Integer (n/a)];

    题记:以前记录过一些自己遇到的BUG,这个行为,让我一看报错的提示信息就能定位到问题的所在,后来记得比较多了,好多是重复性的再加上比较忙就没有详细的记录了,今天的工作量比较小,就顺便记录一下,以便以后 ...