一.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属性实现大图里面抠取小图。

CSS中background-position使用技巧的更多相关文章

  1. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  2. 装载:对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  3. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  4. CSS中background的用法

    CSS中  background 是一个很基本的而且比较常用的样式 background : background-color || background-image || background-re ...

  5. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  6. 关于css中的position定位

    希望这波position可以有帮助^_^! css中的position属性主要分为:static.relative.absolute.fixed.center.page.sticky(红色是css3中 ...

  7. css中对position的几种定位方式的最佳诠释

    关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解: 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示   CSS中Positio ...

  8. 理解css中的position属性

    理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...

  9. CSS中的一下小技巧2之CSS3动画勾选运用

    使用CSS3实现动画勾选 相信大家在项目中会经常遇到这种需求:勾选框.现在用CSS3来实现一个动画勾选,只需要一个标签即可完成: 这次需要用到CSS中伪类 after,这个小技巧也是很容易忘记的,所以 ...

  10. 对CSS中的Position属性的一些深入探讨

    转:http://www.cnblogs.com/coffeedeveloper/p/3145790.html Position属性 Position的属性值共有四个static.relative.a ...

随机推荐

  1. TCD产品技术参考资料

    1.Willis环 https://en.wikipedia.org/wiki/Circle_of_Willis 2.TCD仿真软件 http://www.transcranial.com/index ...

  2. xss挑战赛小记 0x02(prompt(1))

    0x0O 上次搜xss挑战赛的时候 还找到了一个看上去难度更高的挑战赛 今天做了一下 学到了很多新东西 这个挑战赛能够在页面成功prompt(1)就算过关了 挑战地址 http://prompt.ml ...

  3. 设计模式——模版方法模式详解(论沉迷LOL对学生的危害)

    .  实例介绍 在本例中,我们使用一个常见的场景,我们每个人都上了很多年学,中学大学硕士,有的人天生就是个天才,中学毕业就会微积分,因此得了诺贝尔数学奖:也有的人在大学里学了很多东西,过得很充实很满意 ...

  4. c++实验3类和对象

     实 验 3: part 1:验证 part 2:graph #include <iostream> #include "graph.h" using namespac ...

  5. shell -- 大括号和小括号

    在这里我想说的是几种shell里的小括号,大括号结构和有括号的变量,命令的用法,如下: 1.${var} 2.$(cmd) 3.()和{} 4.${var:-string},${var:+string ...

  6. mysql 导入CSV数据 [转]

    转自: http://blog.chinaunix.net/uid-23284114-id-3196638.html MYSQL   LOAD DATA INFILE命令可以把csv平面文件中的数据导 ...

  7. C++学习008-delete与delete[]的差别

    对于简单的数据类型,delete与delete[]是没啥差别的,就是等价的 例如 int main() { int *pdata = new int[20]; delete pdata; //dele ...

  8. 序列化反序列化--Xstream的使用

    之前讲了fastjson的使用--将JavaBean与json对象之间互相转换. 该篇文章,教大家使用Xstream来实现XMl与JavaBean的转换. 第一步: 通过maven引入XStream的 ...

  9. 九度OJ--Q1163

    import java.util.ArrayList;import java.util.Scanner; /* * 题目描述: * 输入一个整数n(2<=n<=10000),要求输出所有从 ...

  10. python中locals和globals函数

    参考:http://www.cnblogs.com/wanxsb/archive/2013/05/07/3064783.html Python有两个内置的函数,locals() 和globals(), ...