一.background-position:left top;

  背景图片的左上角和容器(container)的左上角对齐,超出的部分隐藏。等同于 background-position:0,0;也等同于background-position:0%,0%;

二.background-position:right bottom;

  背景图片的右下角和容器(container)的右下角对齐,超出的部分隐藏。等同于background- positon:100%,100%;也等同于background-positon:容器(container)的宽度-背景图片的宽度,容器 (container)的高度-背景图片的高度

三.background-position:500px 15px;。

  背景图片从容器(container)左上角的地方向右移500px,向下移15px,超出的部分隐藏。

四.background-position:-500px -15px;。

  背景图片从容器(container)左上角的地方向左移500px,向上移15px,超出的部分隐藏。

五.background-position:50% 50%;。

  等同于left:{容器(container)的宽度—背景图片的宽度}*left百分比,超出的部分隐藏。等同于right:{容器(container)的高度—背景图片的高度}*right百分比,超出的部分隐藏。

六.background-position:-50% -50%;。

  等同于left:-{{容器(container)的宽度—背景图片的宽度}*left百分比(百分比都取正值)},超出的部分隐藏。等同于 right:-{{容器(container)的高度—背景图片的高度}*right百分比(百分比都取正值)},超出的部分隐藏。

总结:利用div大小和十字架原理,可以用background-position属性实现大图里面抠取小图。

MDN上<position>值解释是:一种CSS数据类型,2D坐标空间,用来设置相对盒子的坐标。

我们经常使用的background-position的值就是<position>值,最近刚介绍的object-position的值也是<position>值。

<position>值支持1~4个值,可以是具体数值,也可以是百分比,也可以是lefttoprightcenterbottom关键字。可参考下图经典示意:

如果偏移没有相应的关键字,则会被认为是center, 因此,background-position:top center可以直接写作background-position:top

如果同时出现3个值或4个值,则表示可以指定偏移的相对位置,这是CSS3新特性,现代浏览器下才支持。包括:Chrome 25+, Firefox 13+, IE 9+, Opera 10.5+, Safari/iOS 7+ .

例如:

background-position: right 40px bottom 20px;

效果则是:

您可以狠狠地点击这里:background-position 4值效果Demo

哇哦,IE9都支持,应该可以愉快地使用了吧!抱歉,我要泼点冷水。貌似Android的支持有些糟糕,据说:Android 4.4才支持,Android 4.0~4.2都不支持。因此,我们在实现此类效果的时候,可能还需要留一手,如下,使用calc计算:

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

使用calc计算总体来说兼容性好一点,但是,IE9浏览器下,根据caniuse的说法,会让IE9浏览器奔溃。

因此,实际使用还需要根据场景分别或hack处理。

百分比单位
background-position中的百分比单位是个很有意思的东西。其表现与CSS中其他的百分比单位表现都不一样。

例如,一个图片:

img { position: absolute; left: 100%; }

一定是在父容器外部。但是,在<position>值中,却是不一样的表现。

我们可以看下这个iframe示意:

其中,上面的妹子是background-position百分比,下面的50%透明的妹子是left百分比,可以看出两者的定位差异。

这就是为何background-position:100% 100%是定位在容器右下角的原因。

<position>值对应的容器坐标位置该如何计算呢?

实际上是有一个公式的:

positionX = (容器的宽度-图片的宽度) * percentX;
positionY = (容器的高度-图片的高度) * percentY;

因此,当background-position:100% 100%时候,实际定位值就是容器尺寸和图片尺寸的差异,于是,就有了右下角定位效果。

有个这个公式,我们也能理解百分比负值的一些表现了,比方说你觉得下面两行CSS对应图片的表现是?

background-position: -50% -50%;

object-position: -50% -50%

是不是觉得应该是定位在容器的左上角,同时有部分图片超出容器左上角隐藏不可见,就类似上面这个截图:

但是,实际上,不好意思,可能是会下面这种效果(此截图来自这里,您可以狠狠地点击):

接近于下面CSS的效果:

background-position: 40px 10px;

深受传统百分比定位迷惑的我们可能一时间会想不通,明明是个负值百分比定位,怎么会是一个正值效果呢?这不科学啊!

但是,我们套用<position>百分比值计算公式,就豁然开朗了!

因为图片的尺寸大于容器尺寸,所以:

  • (容器的宽度-图片的宽度) * -50% 的结果是个正值
  • (容器的高度-图片的高度) * -50% 的结果也是个正值;

background-position详解的更多相关文章

  1. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  2. [TimLinux] CSS float和position详解

    1.1. 定义 摘自w3school:float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它 ...

  3. CSS中position详解与常见应用实现

    在web前台开发时候,我们必不可少的会用到postion属性进行布局定位.今天总结了一下position知识点,与常用功能与大家分享,欢迎大家交流指正. 首先我们对postion属性进行详解. 在CS ...

  4. Kooboo CMS - Html.FrontHtml.Position 详解

    DataContract 数据契约 http://www.cnblogs.com/Gavinzhao/archive/2010/06/01/1748736.html https://msdn.micr ...

  5. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  6. CSS中background属性详解

    CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...

  7. position详解

    本文旨在普及一下position的用法,CSS中position的使用率相当之高,对于新入行的小白,不仅要知其然,还要知其所以然. position(定位类型),主要有4种属性值 : static.f ...

  8. CSS background 属性详解

    CSS background Property 语法: background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-cl ...

  9. CSS定位之position详解(转载)

    本文转载于xingoo的博文:http://www.cnblogs.com/xing901022/p/5193751.html  position属性 在前端中,position是很常见的属性.通过这 ...

  10. 定位position详解:relative与absolute

    定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设 ...

随机推荐

  1. git 命令合并分支代码

    git 命令合并分支代码 对于复杂的系统,我们可能要开好几个分支来开发,那么怎样使用git合并分支呢? 合并步骤: 1.进入要合并的分支(如开发分支合并到master,则进入master目录) git ...

  2. K:汉诺塔问题

    相关介绍:  汉诺塔问题是一个通过隐式使用递归栈来进行实现的一个经典问题,该问题最早的发明人是法国数学家爱德华·卢卡斯.传说印度某间寺院有三根柱子,上串64个金盘.寺院里的僧侣依照一个古老的预言,以上 ...

  3. COCI2017-2018-2 San

    题意 有\(n \leq 40\)个节点,每个节点有权值\(H \leq 1e9\)和贡献\(v \leq 1e9\),从任意一个点可以向右跳到一个权值不小于它的节点,并获得该点贡献 可以从任意一个点 ...

  4. mysql中LOCATE和CASE WHEN...THEN...ELSE...END结合用法

    之前项目中需要写一个sql,就是查出某个调研详情中,选A答案,B答案,C答案...F答案的人各有多少人,这个sql也是费了很大的力气才写出来,故记下来,方便以后使用. 其中tbl_research_i ...

  5. Java学习笔记(4)----Public,Protected,Package,Private修饰符可见性

    Java修饰符类型(public,protected,private,friendly) public的类.类属变量及方法,包内及包外的任何类均可以访问:protected的类.类属变量及方法,包内的 ...

  6. The difference between a local variable and a member variable

    package com.itheima_04; /* * 成员变量和局部变量的区别: * A:在类中的位置不同 * 成员变量:类中,方法外 * 局部变量:方法中或者方法声明上(形式参数) * B:在内 ...

  7. Value与Sql Value

    在使用Value作为参数传递给SqlServer时 实际上传递的是SqlValue 为其赋值的一种方式,可以将datetime类型转换成string类型(yyyy-MM-dd HH:mm:ss)

  8. Java代码调用存储过程和存储方法

    准备一个oracle 的JDBC jar 包:ojdbc14_11g.jar 首先找到你的 oracle 安装位置,例如: 1.创建一个JDBC数据库连接工具类: package com.test.d ...

  9. SVN图标不显示的解决几种方式

    系统安装的Tortoise SVN,不知道是不是安装了其他软件的缘故,造成SVN客户端功能可以正常使用,就是文件夹或文件的左下角不显示图标.故上网查找解决方法: 方法一: 升级到最新版本,基本是没用的 ...

  10. Java学习---Excel读写操作

    1.1.1. 简介 Apache POI 使用Apache POI 完成Excel读写操作 Apache POI 是用Java编写的免费开源的跨平台的 Java API,Apache POI提供API ...