三种：

  1. 关键字：background-position: top left;
  2. 像素：background-position: 0px 0px;
  3. 百分比：background-position: 0% 0%;

区别：前两种定位将背景图片左上角的原点放置在指定位置；第三种方式将图片本身的点（x%,y%）与背景区域的点（x%,y%）重合。

使用百分比设置的主要优势在于，当页面缩放的时候，背景图片也会跟着一起缩放。

CSS 中背景图片定位方法的更多相关文章

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

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

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

    http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...

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

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

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

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

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

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

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

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

  7. CSS背景图片定位

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

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

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

  9. 解决PNG图片在IE6中背景不透明方法_解决IE6中PNG背

    解决PNG图片在IE6中背景不透明方法_解决IE6中PNG背   目录 解决代码 解决png图片在html中 解决png作为网页背景-css 1.解决PNG图片在IE6中背景不透明的CSS与JS代码 ...

随机推荐

  1. Myeclipse下JSP打开报空指针异常解决方法。

    Myeclipse下JSP打开报空指针异常解决方法 一.运行JSP文件就出错 静态的JSP页面访问时候正常,只要是牵涉到数据库的页面就出错,出错见下图. 出现这种情况让我调试了一天,各种断点,各种改代 ...

  2. Swift微博项目--Swift中通过类名字符串创建类以及动态加载控制器的实现

    Swift中用类名字符串创建类(用到了命名空间) OC中可以直接通过类名的字符串转换成对应的类来操作,但是Swift中必须用到命名空间,也就是说Swift中通过字符串获取类的方式为NSClassFro ...

  3. jquery- pagination使用

    $("#gupiaopage").page({ showInfo: false, showJump: false, showPageSizes: true, firstBtnTex ...

  4. 本篇文章： HTML DOM 对象

    HTML DOM 对象 本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法 ...

  5. bzoj2938: [Poi2000]病毒

    建AC自动机,把所有病毒的节点都删掉,dfs判有没有环,有环就找得到. #include <iostream> #include <cstdio> #include <c ...

  6. 74.Android之四种启动模式

    转载:http://www.cnblogs.com/meizixiong/archive/2013/07/03/3170591.html 一.启动模式介绍 启动模式简单地说就是Activity启动时的 ...

  7. Matlab以特殊分隔符写入txt（dlmwrite）

    clc clear all load('E:\RSWeb\mahoyt数据集\movielens\u.data'); dlmwrite('E:\RSWeb\mahoyt数据集\movielens\ne ...

  8. 【bzoj2242】 SDOI2011—计算器

    http://www.lydsy.com/JudgeOnline/problem.php?id=2242 (题目链接) 题意 给出y,z,p.求:1.yz mod p:2.xy=z(mod p):3. ...

  9. 【poj3122】 Pie

    http://poj.org/problem?id=3122 (题目链接) 题意 给出N个pie的半径和F个friend,每个friend得到的pie必须一样,求每个人能得到的pie的最大大小. so ...

  10. Android程序设计-圆形图片的实现

    在android中,google只提供了对图形的圆形操作,而没有实现对图片的圆形操作,所以我们无法实现上述操作,在此我们将使用框架进行设计(下述框架为as编写): https://github.com ...