规则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. Scala开启之旅

    嘿嘿,公司最近需要测试SPARK性能,赶上了.. 那LUA之后,SCALA也简单看看,,, 其实,我三月时买了本129元的SPARK的书,,全国只那一本哈. package com.hengheng. ...

  2. 【HDOJ】1316 How Many Fibs?

    Java水了. import java.util.Scanner; import java.math.BigInteger; public class Main { public static voi ...

  3. Power Network (最大流增广路算法模板题)

    Time Limit: 2000MS   Memory Limit: 32768K Total Submissions: 20754   Accepted: 10872 Description A p ...

  4. HDU 1254 推箱子 BFS

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1254 题目分析: 做这道题,感觉挺简单的,做着做着就错了20次, 我也是醉了, WA到吐的节奏啊! 思 ...

  5. web references是在.NET下的一个东东?它有什么用呢?和“引用”有什么区别!

    WEB引用的意思啊 在.net中有类库和WEB SERVICE这两种类型的项目, 前者编译出来的DLL就是我们普通使用的引用中的类库, 后都编译出来的,在服务器IIS上为其提供服务,我们调用时就要用到 ...

  6. Delphi HTTP error message: Can't execute C:\Program Files\Borland\Delphi7\Bin\serverinfo.exe 1813

    delphi  调用Webservice ,停止服务的时候总是爱提示: Internal Server ErrorHTTP status code: 500 HTTP error message: C ...

  7. [Design Pattern] Factory Pattern 简单案例

    Factory Pattern , 即工厂模式,用于创建对象的场景,属于创建类的设计模式 . 下面是一个工厂模式案例. Shape 作为接口, Circle, Square, Rectangle 作为 ...

  8. jQuery.isEmptyObject()函数用于判断指定参数是否是一个空对象。

    jquery中有一个函数isEmptyObject()用来判断制定参数是否是一个空对象. 示例如下: function isEmptyObject(e) { var t; for (t in e) r ...

  9. cocos日记

    n/2/2015 ADT       E:\All Setup\eclipse_past\Eclipse_plugins_ADT 15/2/2015 配置cocos win32 开发环境 链接:htt ...

  10. AutoCompleteTextView ArrayAdapter

    AutoCompleteTextView   继承于EditText,拥有EditText所有属性和方法 在输入框中输入我们想要输入的信息就会出现其他与其相关的提示信息 首先在activity_mai ...