首先准备一张雪碧图，Like this

背景图片的定位方法有3种，比较常用的两种为

关键字：background-position: top left;   (top/bottom/cennter/left/right)

像素：background-position: 水平移动px 垂直移动px;

关键词：

其中关键字方法background-position: top left 和left top效果是一样的。（注意：如果您仅规定了一个关键词，那么第二个值将是"center"。）

关于像素值的正负：负数方向为左/上 ，同理正数方向为右/下

他们背景定位的原点都是在左上角，如果能理解下面的代码，说明上面两种方法已经合格了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>背景定位练习</title>

</head>

<body>

<style rel="stylesheet" type="text/css">

.box1, .box2, .box3, .box4,.box5, .box6, .box7, .box8,.box9 {

float: left;

width:100px;

height: 100px;

background: #666 url(18.png) no-repeat;

margin-left: 10px;

}

.box1{background-position: -300px 0;}

.box2{background-position: -200px 0;}

.box3{background-position: -100px 0;}

.box4{background-position:top left;}

.box5{background-position: 0 -100px;}

.box6{background-position: 0 -200px;}

.box7{background-position:bottom left;}

.box8{background-position:-300px -200px;}

.box9{background-position:bottom right;}

    </style>

    <div class="box1"></div>

    <div class="box2"></div>

    <div class="box3"></div>

    <div class="box4"></div>

    <div class="box5"></div>

    <div class="box6"></div>

    <div class="box7"></div>

    <div class="box8"></div>

    <div class="box9"></div>

</body>

</html>

预览效果为：

需要注意的是：在repeat的状态下和默认的状态下（默认即为repeat）,background-position是不起作用的!

下一节我们继续讲定位的第三种方法:

百分比：background-position: 0% 0%;

相关文章：

如何制作雪碧图：photoshop：制作sprite拼贴图片

background-position的百分比

css背景图片定位练习（一）的更多相关文章

  1. CSS背景图片定位

    原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...

  2. css背景图片定位练习（二）： background-position的百分比

    background-position:x y; 百分比定位并不能直观的看出来,需要通过计算. background-position百分比计算公式: (容器宽度—背景图片的宽度)*x%=xpx(容器 ...

  3. CSS常用背景图片定位方法

    CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会 ...

  4. CSS 背景图像 背景图片定位

    背景图片定位 background-position属性可以给背景图片定位. background-position属性有两个值,第一个值是水平位置,第二个值是垂直位置.这两个值可以使用百分比来表示( ...

  5. HTML+CSS—背景图片、图片定位

    设置背景图片格式: background-image: url(img/ic.jpg); 注意点: 如果父容器面积大于背景图片,默认显示该图片整面平铺 设置是否需要平铺属性: background-r ...

  6. background的属性和背景图片定位的实例

    本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...

  7. css背景图定位和浮动

    网站图标引入:<link rel="shortcut icon" href="ico图标地址"> 背景图片  background-image: u ...

  8. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  9. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

随机推荐

  1. DFS POJ 2362 Square

    题目传送门 /* DFS:问能否用小棍子组成一个正方形 剪枝有3:长的不灵活,先考虑:若根本构不成正方形,直接no:若第一根比边长长,no 这题是POJ_1011的精简版:) */ #include ...

  2. Win8怎么查看IP地址

    win8查看自己IP地址方法一:查看本地网络法 1.首先从桌面右下角的“网络连接图标上”点击右键,然后选择打开网络和共享中心,如下图所示: 打开win8网络和共享中心 2.之后在打开的网络和共享中心窗 ...

  3. The number of divisors(约数) about Humble Numbers[HDU1492]

    The number of divisors(约数) about Humble Numbers Time Limit: 2000/1000 MS (Java/Others)    Memory Lim ...

  4. Linux redirect the stdout to a file

      1: int save_out = dup(fileno(stdout));//backup stdout 2: int out = open("cout.log", O_RD ...

  5. Grunt配置文件编写技巧及示范

    受益于grunt这么久,继续分享关于grunt的一些技巧.grunt确实是前端项目中不可或缺的提升效率的工具.第一次接触grunt是在去年7月份,开始有接触LESS.Coffee Script的等需要 ...

  6. C#可以获取Excel文件中Sheet的名字

    C#可以获取Excel文件中Sheet的名字吗 C#可以获取Excel文件中Sheet的名字吗 我试过WPS的表格可以 可以 要代码么 百度都有 [深圳]Milen(99696619)  14:13: ...

  7. HDU 4679 Terrorist’s destroy

    如果不在最长路的边,那么肯定是w*最长路. 如果在最长路,那么把最长路分成两段,左边树的最长路就是左段+左边点的次短路(不包含最长路上的点的最长路) ,右边同理. 还有就是更新,经过左端点的最长路,不 ...

  8. elasticsearch2.2 集群搭建各种坑

        目前生产环境的es版本是1.0版本,需要升级到最新的2.2版本,于是在测试环境进行部署集群测试,在测试过程中遇到的坑相当多,下面详细介绍下.       1. 版本升级到2.2后,必须建一个单 ...

  9. mac 下的 top 命令

    mac 下的 top 命令 文章目录 以前只是在 linux 机器上使用 top 命令.常用的快键键是: p 键 - 按 cpu 使用率排序 m 键 - 按内存使用量排序 这 2 个快捷键在 mac ...

  10. lintcode ：Coins in Line II 硬币排成线 II

    题目 硬币排成线 II 有 n 个不同价值的硬币排成一条线.两个参赛者轮流从左边依次拿走 1 或 2 个硬币,直到没有硬币为止.计算两个人分别拿到的硬币总价值,价值高的人获胜. 请判定 第一个玩家 是 ...