首先准备一张雪碧图，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. HDU1796 How many integers can you find（容斥原理）

    题目给一个数字集合,问有多少个小于n的正整数能被集合里至少一个元素整除. 当然是容斥原理来计数了,计算1个元素组合的有几个减去2个元素组合的LCM有几个加上3个元素组合的LCM有几个.注意是LCM. ...

  2. POJ1850 Code（组合+康托展开）

    题目问一个合法字符串的字典序是第几个,合法的字符串是指里面的字符严格递增. 先判断合不合法,然后用类似康托展开的过程去求.大概过程就是用组合数算出某长度某前缀有几个,累加起来. 真难一遍写对.. #i ...

  3. ural 1283. Dwarf

    1283. Dwarf Time limit: 1.0 secondMemory limit: 64 MB Venus dwarfs are rather unpleasant creatures: ...

  4. python 代码片段13

    #coding=utf-8 # 条件转化 data=raw_input("enter 'y' or 'n'") if data[0]=='y': print "you t ...

  5. TYVJ P1067 合唱队形 Label:上升子序列？

    背景 NOIP2004 提高组 第三道 描述     N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依次编号 ...

  6. 【BZOJ】3809: Gty的二逼妹子序列

    http://www.lydsy.com/JudgeOnline/problem.php?id=3809 题意:n个元素(1<=n<=100000)每个元素有一权值<=n.q个询问, ...

  7. Asp.Net：GridView 编辑、删除、自定义分页以后备用

    页面 GridView 绑定:在中,有 <asp:BoundField/>和 <asp:TemplateField><ItemTemplate>嵌套服务器控件 &l ...

  8. ie8默认主页/起始页无法修改

    HKEY_CURRENT_USER\Software\Policies\Microsoft 展开Microsoft,查看其下是否包含子项 Internet Explorer? 若有,请删除.这一步应该 ...

  9. P4factory <Integration with Mininet>

    在终端A进入simple_router目录,make bm之后,执行 ./run_demo.bash 成功和Mininet进行协作: *** Creating network *** Adding h ...

  10. PDO 学习与使用 ( 二 ) PDO 数据提取 和 预处理语句

    以数据库 msg 为例,说明 PDO 的数据提取.预处理语句: mysql> show tables;+---------------+| Tables_in_msg |+----------- ...