首先准备一张雪碧图，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. JavaBean中的get/set 的命名规范

      最近的struts项目中遇到了这样的问题: 我的action中全局变量明明有getset方法,而且是自动生成的,但是在使用的时候,总是说找不到这个属性的getset方法,取不到从jsp传来 的值, ...

  2. 【NOI2015】品酒大会

    一年一度的“幻影阁夏日品酒大会”隆重开幕了.大会包含品尝和趣味挑战两个环节,分别向优胜者颁发“首席品酒家”和“首席猎手”两个奖项,吸引了众多品酒师参加. 在大会的晚餐上,调酒师 Rainbow 调制了 ...

  3. HttpClient_javax.net.ssl.SSLHandshakeException: sun.security.validator 问题解决,与环境有关

    用httpclient访问https 资源时,会出现异常,与环境也有关系,有些机器请求正常. javax.net.ssl.SSLHandshakeException: sun.security.val ...

  4. 【转】delphi程序只允许运行一个实例的三种方法：

    一.        创建互斥对象 在工程project1.dpr中创建互斥对象 Program project1 Uses Windows,Form, FrmMain in 'FrmMain.pas' ...

  5. C# 从数据库中删除，插入，修改 索引选中条目

    一.删除 1. ) { var currentSelectIndex = usrListView.SelectedIndex; var item = usrView[currentSelectInde ...

  6. 使用Eclipse开发Java Web过程中Debug调试的使用方法

    里介绍的是在Eclipse中的Debug调试. 首先右击项目选择Debug As -- Debug on Server 或者点击Server面板的小昆虫图标,启动Debug模式. 运行web项目,进行 ...

  7. FastDFS常见命令

    1: 启动FastDFS tracker: ./fdfs_trackered  .../tracker.conf storage: ./fdfs_storaged  .../storage.conf ...

  8. [办公自动化]利用Acrobat完成问卷调查或者考试卷

    整体思路:(软件环境Acrobat) 1.制作问卷. 采用word制作,制作基础页面,然后倒入.自己亲测时,发现一般的文字域是可以的,但是单选按钮就不能导入. 如果是考试卷,可以利用word制作基础页 ...

  9. PHP获取某远程网站的服务器时间

    <?php function get_time($server){ $data  = "HEAD / HTTP/1.1\r\n"; $data .= "Host:  ...

  10. Centos下使用Heartbeat实现集群[转]

    Linux 包括 CentOS 下高可用性（HA：High Availability）集群方案很多，而 Heartbeat 是比较常见和性价比比较高的一种。一、硬件及网络连接 群集一般需要2台以上服务 ...