规则1: background-position:xpx ypx;

  为正值时:背景图片的左上顶点朝右下移动直至距离div的左上顶点为xpx ypx;

规则2: background-position:-xpx -ypx;

  为负值时:背景图片的左上顶点朝左上移动直至距离div的左上顶点为xpx ypx;

规则3: background-position:x% y%;

  背景图片的x% y%所在的那一点和div的x% y%所在的那一点重合时的效果;

  有时候这一点不是能容易的一眼看出,可能还要稍微计算一下。通常情况下规则1/2是最简单易行的。

  在chrome中测试,当页面缩放的时候,规则1/2和3的背景图片都会跟着一起缩放。

规则4: background-position:left bottom;

  把left看作0%,bottom看作100%后同规则3一致。

css background-position:x% y%的更多相关文章

  1. CSS中position和header和overflow和background

    <!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...

  2. PHP全栈开发(八):CSS Ⅲ background

    设置背景颜色: div { background-color:#b0c4de; } 不仅可以给body标签设置背景颜色,还能给p,div,h标签设置背景颜色 设置背景图片: body { backgr ...

  3. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  4. CSS 背景-CSS background

    这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法   -   TOP CSS背景基础知识 CSS 背 ...

  5. HTML CSS——background的认识(一)

    今天回归bug时无意间看到了样式表中background属性,如今总结一下: 1.background-color:设置元素的背景色.其值能够为:color-name.color-rgb.color- ...

  6. 关于CSS 的position定位问题

    对于初学者来说,css的position定位问题是比较常见的.之前搞不清楚postion定位是怎么回事,排版一直歪歪斜斜的,老是排不好 css的定位一般来说,分为四种: position:static ...

  7. CSS background 之设置图片为背景技巧

    首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用):background-color 背景颜色background-image 背景图片backg ...

  8. CSS background 属性详解

    CSS background Property 语法: background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-cl ...

  9. CSS之position体验

    目录: 1. position介绍 2. relative 3. position 4. fixed与static 5. 总结 1. position介绍 position最简单的理解就是元素位置的定 ...

  10. [CSS3] CSS Background Images

    Body with background image and gradient html { background: linear-gradient(#000, white) no-repeat; h ...

随机推荐

  1. Delphi会自动初始化全局变量和类成员变量,但不初始化局部变量

    If you don't explicitly initialize a global variable, the compiler initializes it to 0. Object insta ...

  2. python3、selenium、autoit3,通过flash控件上传文件

    autoit.au3 #include <Constants.au3> WinWait(); //暂停执行脚本,直到上传对话框出现 WinActive("打开") Wi ...

  3. 在linux下文件转码

    在linux下转码命令: iconv  -f utf-8 a.txt > b.txt

  4. Java学习日记-2.3 基本数据类型和对象所占内存空间大小

    转自:http://www.newsmth.net/nForum/#!article/Java/324167

  5. Selenium webdriver 封装与重用

    WebDriver对页面的操作,需要找到一个WebElement,然后再对其进行操作,比较繁琐: WebElement element =driver.findElement(By.name(&quo ...

  6. java创建XML及开源DOM4J的使用

    java import java.io.File; import java.io.StringWriter; import javax.xml.parsers.DocumentBuilder; imp ...

  7. ORACLE的RMAN

    1.什么是RMAN? RMAN可以用来备份和还原数据库文件.归档日志和控制文件.它也可以用来执行完全或不完全的数据库恢复. 注意:RMAN不能用于备份初始化参数文件和口令文件. RMAN启动数据库上的 ...

  8. Mac 下tomcat的安装配置

    首先进去tomcat官网下载选择你要的版本 下载方法 下载完事之后解压到你想放的文件夹.我是把文件夹改名为tomcat.当然随意就好.然后授权命令如下: sudo chmod 你的用户名 Tomcat ...

  9. app被Rejected 的各种原因翻译。这个绝对有用。

    1. Terms and conditions(法律与条款) 1.1 As a developer of applications for the App Store you are bound by ...

  10. Linux磁盘设备文件(sda,sdb,sdc…)变化问题

    在Linux下往往会碰到这样的问题,磁盘的设备文件,比如/dev/sda, sdb, sdc等等在某些情况下会混乱掉,比如sda变成了sdb或者sdc变成了sdb等等,这样无形中会导致磁盘设备管理的混 ...