三种：

  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. 网络设计中需要考虑的时延latency差异

    Jeff Dean提到不同数据访问方式latency差异 Numbers Everyone Should Know L1 cache reference 0.5 ns Branch mispredic ...

  2. 那些用JavaScript写的操作系统

    之前有人说过Chrome是新的C语言运行环境(Chrome Is The New C Runtime) ,不过笔者更倾向于Web是新的C语言运行环境,而且这种技术绝对没有版权问题,也绝不会被一家公司垄 ...

  3. [转]响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

    原文地址:http://www.jb51.net/web/70360.html 现在移动设备越来越普及,用户使用智能手机.pad上网页越来越普遍.但是传统的fix型的页面在移动终端上无法很好的显示.因 ...

  4. 【转】向HTML中插入视频并兼容所有浏览器的方法

    原文地址:http://www.jb51.net/web/168548.html 向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些, ...

  5. iOS开发,系统自带的分享简单实现

    由于simulator设置里面没有新浪微博的选项,所以选择了真机调试,成功了.代码不多,包含头文件 没有配置登录信息的话,是没有作用的                                 ...

  6. java中的this和super的作用和异同和C++中调用父类的构造函数

    来源于:http://www.cnblogs.com/hasse/p/5023392.html 这几天看到类在继承时会用到this和super,这里就做了一点总结,与各位共同交流,有错误请各位指正~ ...

  7. bootstrap 2.3版与3.0版的使用区别

    bootstrap 2.3版与3.0版的使用区别 bootstrap已经推出了3.0的新版,看起来2.3.x版本也不会再更新了.那么bootstrap 2.3版与3.0版的区别在哪里呢?下面我们就来介 ...

  8. CSS强制英文、中文换行与不换行 强制英文换行

    1. word-break:break-all;只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space: ...

  9. Paths(转载)

    Paths中的几个重要元素 Points void CGContextMoveToPoint ( CGContextRef c, CGFloat x, CGFloat y ); 指定一个点成为curr ...

  10. 小记-虚拟机装ubuntu遇到问题

    今天用虚拟机virtualbox装ubuntu遇到了一个问题,如图 解决方法: 1.首先查看创建虚拟机的时候是基本设置有没有对:(如图) 主要去看所选择的版本对应是否正确,比如32位和64位之类的. ...