http://blog.csdn.net/oscar92420aaa/article/details/51304067

CSS中背景图片的定位,困扰我很久了。今天总算搞懂了,一定要记下来。

在CSS中,背景图片的定位方法有3种:

  1)关键字:background-position: top left;

  2)像素:background-position: 0px 0px;

  3)百分比:background-position: 0% 0%;

上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同。

前两种定位,都是将背景图片左上角的原点,放置在规定的位置。请看下面这张图,规定的位置是"20px 10px"和"60px 50px",都是图片的原点在那个位置上,图中用X表示。

但是第三种定位,也就是百分比定位,不是这样。它的放置规则是,图片本身(x%,y%)的那个点,与背景区域的(x%,y%)的那个点重合。比如,如果放置位置是"20% 10%",实际结果如下图,可以看到这个点是在图片本身的"20% 10%"的位置上。

下面是一个有趣的例子。

背景图片是四个边长为100px的方块叠在一起:

请问怎样才能将其横过来:

答案是,在网页中先设置四个div区域:

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

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

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

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

然后,这样编写CSS:

.box1, .box2, .box3, .box4 {
  float:left;
  width:100px;
  height:100px;
  position:relative;
  background: #F3F2E2 url(1234.png) no-repeat;
}

.box1 {
  background-position:0% 0%;
}

.box2 {
  background-position:0% 33.33333%;
}

.box3 {
  background-position:0% 66.66666%;
}

.box4 {
  background-position:0% 100%;
}

点击这里查看最后的效果。可以看到第二和第三个方块的设置,并不是一般想象中的"0% 25%"和"0% 75%"。

不过说实话,这个例子用像素设置法更容易一些。使用百分比设置的主要优势在于,当页面缩放的时候,背景图片也会跟着一起缩放,具体请参考下面"延伸阅读"中的第二篇文章。

(转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法的更多相关文章

  1. HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

    CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...

  2. CSS中背景图片定位方法

    转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...

  3. CSS 中背景图片定位方法

    三种: 关键字:background-position: top left; 像素:background-position: 0px 0px; 百分比:background-position: 0% ...

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

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

  5. CSS背景图片定位

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

  6. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

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

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

  8. CSS中背景图片的background-position中的left top到底是相对于谁的?

    在学习的时候遇到了如下问题: CSS中背景图片的background-position中的left top到底是相对于谁的,content-box?padding-box?border-box? ba ...

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

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

随机推荐

  1. 骨骼动画 cocos2d-x + cocoStudio <cocos2d-x : version 2.2.0>

    cocos2d-x version 2.2.0 首先,在 HelloWorldScene.cpp 中的 init()函数中 添加如下代码 (资源文件可以直接到 cocos2d-x 中获取) #incl ...

  2. 畅通工程再续 (kruskal算法的延续)

    个人心得:这题其实跟上一题没什么区别,自己想办法把坐标啥的都给转换为对应的图形模样就好了 相信大家都听说一个“百岛湖”的地方吧,百岛湖的居民生活在不同的小岛中,当他们想去其他的小岛时都要通过划小船来实 ...

  3. Operating System-进程间互斥的方案-保证同一时间只有一个进程进入临界区(3)- TSL指令

    本文接上一篇文章继续介绍如何实现同一时间只允许一个进程进入临界区的机制.本文主要介绍TSL指令. 方案汇总 屏蔽中断 锁变量 严格轮换法 TSL指令 Peterson解法 一.What is TSL ...

  4. Mesos问题汇总

    1.Mesos的IP配置 我在虚拟机里面搭载了一个mesos,但是外主机无法通过http://ip:5050 我在虚拟机内部测试发现wget localhost:5050可以正常访问:但是wget i ...

  5. Java实现Stack类

    Java实现Stack类 import java.util.Iterator; import java.util.NoSuchElementException; import java.util.Sc ...

  6. bae3.0第四步 第一个polls系统

    1.创建自己的app 进入新建的blog工程目录,执行其下面的manage.py来创建polls应用,命令为: python manage.py startapp polls2.定义app的model ...

  7. 使用PowerShell在Azure China创建Data Warehouse

    微软的Azure Data Warehouse是基于MPP架构的分布式系统: Control Node负责管理系统和接受用户的请求,Compute Node负责计算. 目前在国内Azure Data ...

  8. 单端IO标准

    单端标准 常用的单端IO标准是LVTTL和LVCMOS. 目前业界绝大部分FPGA/CPLD器件的LVCOMS的IO是由CMOS推挽(push-pull)驱动器构成的,这种结构是上面的PMOS管和下面 ...

  9. 蓝桥杯 算法训练 ALGO-145 4-1打印下述图形

     算法训练 4-1打印下述图形   时间限制:1.0s   内存限制:256.0MB 问题描述 使用循环结构打印下述图形,打印行数n由用户输入.打印空格时使用"%s"格式,向pri ...

  10. POJ2976(最大化平均值)

    Dropping tests Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9329   Accepted: 3271 De ...