首先准备一张雪碧图，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. 算法教程（2）zz

    In the previous section we saw how to use vectors to solve geometry problems. Now we are going to le ...

  2. 跳舞毯[XDU1005]

    Problem 1005 - 跳舞毯 Time Limit: 2000MS   Memory Limit: 65536KB   Difficulty: Total Submit: 308  Accep ...

  3. HTML5离线应用无法更新的定位与解决

    一.些许前提 最近在制作一个Web应用, 其中用到了HTML5的离线应用功能(offline application), 离线应用的概念就不再阐述, 可以查看这两篇文章: http://www.ibm ...

  4. wc2016总结

    因为我太弱了,高一才第一次来wc. 前几天讲课,被各种小学微积分和初中高等代数虐,简直naive.只好自己做做bzoj,想着练练模板之类的东西. 考试当天自觉状态不错,翻开试题感觉各种神奇(这难道是串 ...

  5. jsoncpp代码实例

    最近开始使用 jsoncpp,以前一直在使用cJSON,但是使用cJSON的时候经常会忘记free掉json的内存,结果造成了内存泄露,程序跑着跑着就崩溃了.所以最近把json转移到了jsoncpp上 ...

  6. spring+struts2+mybatis

    struts2.2.3 + spring3.1.0 + mybatis3.1.0集成简单demo 项目下载地址:http://download.csdn.net/detail/afgasdg/4171 ...

  7. 一、saltstack简介和安装

    系统环境:CentOS6.5 准备yum源: epel源(包含了saltstack的包).阿里源(CentOS-Base.repo) Host解析文件: # cat /etc/hosts 192.16 ...

  8. the thread has exited with code -1073741819

    内存分配异常.无效或冲突.指针存在但指向无效内存区域.

  9. DTD约束的校验工具安装及检验（Iexmltls工具）

    通过打开我们写的dtd约束文档,我们可以看到,在我们不按规定的格式打开xml时并不能检验出错误.此时我们可以借助软件来帮助我们校验. Iexmltls是一个在IE浏览器下安装的用于检验xml约束是否正 ...

  10. HDU 3639 Bone Collector II（01背包第K优解）

    Bone Collector II Time Limit: 5000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...