三种：

  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. restFull常用注解

    @GET.@POST.@PUT.@DELETE.@HEAD您可以使用它们来绑定根资源或子资源内的 Java 方法与 HTTP 请求方法.HTTP GET 请求被映射到由 @GET 注释的方法,以此类推 ...

  2. json写入new_hello文件

    #写入new文件 import json dic = {'name':'alex'} i = 8 s = 'hello' l = [11,22] f = open("new_hello&qu ...

  3. 标题栏ToolBar

    使用标题栏ToolBar 首先需要在AndroidManifest.xml中修改 application主题或者activity主题       隐藏原生标题栏 在styles.xml中自定义主题 a ...

  4. curl operate elasticsearch

    export elasticsearchwebaddress=localhost:9200# 1. Add documentcurl -X PUT "$elasticsearchwebadd ...

  5. Activiti 学习笔记记录（二）

    上一篇:Activiti 学习笔记记录 导读:对于工作流引擎的使用,我们都知道,需要一个业务事件,比如请假,它会去走一个流程(提交申请->领导审批---(批,不批)---->结束),Act ...

  6. Xmanager注册吗

    xmanager4.0注册吗 --

  7. ASP.net mvc Code First 更新数据库

    code first 数据库迁移步骤如下: 第一步:Add-Migration DataBase_Init 1. Install-Package EntityFramework.zh-Hans –Ve ...

  8. Web前端性能优化教程05：网站样式和脚本

    本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:网站样式和脚本代码的放置位置.使用外部javascript和css.完整教程可查看:Web前端性能优化 一.将样式表放在顶部 可视性回馈的重要 ...

  9. 【POJ 1182】食物链（并查集）

    三种动物,A吃B,B吃C,C吃A.那么用并查集时,还要多一个x和根的关系,吃或者被吃或者同类.合并两个需要更新和祖先的关系.这个关系可以自己画一画. #include<cstdio> #d ...

  10. 绘制图形与3D增强技巧(四)----多边形图元及其点画模式

    1.四边形图元 glBegin(GL_QUADS); glend(); 2.通用多边形 glBegin(GL_POLYGONS); glend(); 3.多边形点画模式 glenable(GL_POL ...