在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%"。

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

背景图片与 CSS的那些事的更多相关文章

  1. html css:背景图片链接css写法

    图片作为背景,并且是链接的写法.例如网站的logo图片.例如:土豆的logo图片 <a title="土豆网 tudou.com 每个人都是生活的导演" href=" ...

  2. $设置背景图片的css

    $('.d-game-pic').css('background-image', 'url(' + App.getImg(gameDetail.desc_pic) + ')');

  3. checkbox 背景图片 纯CSS处理办法

    CSS .table_container input[type="checkbox"] { background: #fff url(/img/blue.png); backgro ...

  4. CSS背景图片垂直居中center不起效果完美解决

    背景图片居中CSS如下 background:#4892fe url("<%=basePath%>/img/login_bg.jpg") no-repeat cente ...

  5. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

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

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

  7. CSS background-color 、image 背景图片

    背景颜色 background-color 语法: background-color:<color> 默认值:transparent  透明 适用于:所有元素 继承性:无 动画性:是 计算 ...

  8. 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题

    在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...

  9. CSS hack前传——背景图片全屏

    在之前的博客CSS hack中我有提到,一个问题的解决让我对CSS hack的态度从不屑一顾,到认真研究了实验一下,事情是这样的,最近产品发布,向来狂妄的我被一个bug纠缠住了,甚至丧气的表示我做不出 ...

随机推荐

  1. html5 (个人笔记)

    妙味 html5  1.0 <!DOCTYPE html> <html> <head lang="en"> <meta charset=& ...

  2. wp8 json2csharp

    string jsonData = "{\"result\":\"600\",\"data\":{\"items\&qu ...

  3. struts2文件下载,动态设置资源地址

    转自:http://blog.csdn.net/ctrl_shift_del/article/details/6277340 ServletActionContext.getServletContex ...

  4. SQLite使用方法 SQLiteOpenHelper操作(转)

    SQLiteOpenHelper主要用于 创建数据库 SQLiteDatabase 主要用于 执行sql语句 程序内使用SQLite数据库是通过SQLiteOpenHelper进行操作 1.      ...

  5. Android ImageView图片自适应 (转)

    网络上下载下来的图片自适应:android:adjustViewBounds="true"(其详细解释在下面)<ImageView     android:id=" ...

  6. 百度之星复赛 1004 / hdu5715 二分dp+trie

    XOR 游戏 Problem Description   众所周知,度度熊喜欢XOR运算[(XOR百科)](http://baike.baidu.com/view/674171.htm). 今天,它发 ...

  7. 虚拟机下运行linux通过nat模式与主机通信、与外网连接

    首先:打开虚拟机的编辑菜单下的虚拟网络编辑器,选中VMnet8 NAT模式.通过NAT设置获取网关IP,通过DHCP获取可配置的IP区间.同时,将虚拟机的虚拟机菜单的设置选项中的网络适配器改为NAT模 ...

  8. achartengine 绘图表神器

    http://code.google.com/p/achartengine/

  9. 循环日期的shell

    date="2015-09-23"enddate='2015-11-08'while [[ $date < $enddate ]] do date=`date -d &quo ...

  10. 在Windows Server 2008中安装IIS

    1.右键“我的电脑”,选择“管理”,打开“服务器管理器” 2.点击左边菜单栏“角色”调出角色窗口 3.接着点击“添加角色”,弹出添加“角色向导” 4.点击“下一步”进入服务器角色选项 5.勾选“Web ...