三种：

  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. MyEclipse10连接数据库

    连接oracle数据库 DB窗口>>右键:新建

  2. Timer定时任务

    // main方法 public static void main(String[] args) { timerEnter(); } // 设定指定任务task在指定延迟delay后进行固定延迟per ...

  3. 51nod 1109 bfs

    给定一个自然数N,找出一个M,使得M > 0且M是N的倍数,并且M的10进制表示只包含0或1.求最小的M.   例如:N = 4,M = 100. Input 输入1个数N.(1 <= N ...

  4. oracle 知识

    sqlplus /  as sysdba;  使用操作系统登录oracle数据库 conn panie/panie;  使用普通用户连接数据库 --开启归档模式shutdown immediate;s ...

  5. HTTP协议学习---（九）cookie

    Cookie是HTTP协议中非常重要的东西, 之前拜读了Fish Li 写的[细说Cookie], 让我学到了很多东西.Fish的这篇文章写得太经典了. 所以我这篇文章就没有太多内容了. 最近我打算写 ...

  6. 我所经历的JS性能优化

    转自http://www.cnblogs.com/koking/archive/2011/10/17/2215665.html 折腾了好几天,纠结了好几天,郁闷了好几天,终于在今天可以释怀了,留下其中 ...

  7. 如何在iOS9的plist文件中配置不使用https

    App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Te ...

  8. watch监听 chechbox 全选

    // 监控全选checkbox的状态 $scope.$watch('AllCheck', function (newValue, oldValue) { // 第一次不执行 if (newValue ...

  9. 随机验证码生成（python实现）

    需求:生成随机不重复验证码. 代码: #!/usr/bin/env python # encoding: utf-8 """ @author: 侠之大者kamil @fi ...

  10. python 学习笔记7（类/对象的属性；特性，__getattr__）

    27. 属性的__dict__系统 1)对象的属性可能来自: 其类的定义,叫做类属性 继承父类的定义 该对象实例定义(初始化对象时赋值),叫做对象属性 2)对象的属性存储在对象的 __dict__ 属 ...