规则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. RandomAccessFile和memory-mapped files

    [0]README 0.1) 本文描述转自 core Java volume 2, 旨在理解 java流与文件——RandomAccessFile类解析 的相关知识: 0.1) 本文 转自: http ...

  2. linux mount / umount 命令的基本用法

    linux mount / umount 命令的基本用法 及 开机自动挂载 格式:mount [-参数] [设备名称] [挂载点] 其中常用的参数有: -a 安装在/etc/fstab文件中类出的所有 ...

  3. Linux下apache的停止、开启、重启

    有两种途径 一. service httpd stop(停止) service httpd start(开始) service httpd restart(重启) 这种方法,是系统自带的 二. 或者到 ...

  4. 【转】(DT系列六)devicetree中数据和 struct device有什么关系

    原文网址:http://www.cnblogs.com/biglucky/p/4057499.html devicetree中数据和structdevice有什么关系 总体来说,devicetree与 ...

  5. HDOJ(HDU) 1718 Rank(水题、、、)

    Problem Description Jackson wants to know his rank in the class. The professor has posted a list of ...

  6. Scala 编程(四)内建控制结构

    if 表达式 Scala 的 if 如同许多其它语言中的一样工作.它测试一个状态并据其是否为真,执行两个分支中的一个: var filename = "default.txt" i ...

  7. js中方法类型比较

    参考链接 http://bbs.csdn.net/topics/390775296/ function People(name){this.name=name;//对象方法this.Introduce ...

  8. BitmapFactory.decodeByteArray() 返回null,分析与解决

    问题描述:用android自带的Camera获取图片,上传至远程数据库中(mysql),以BLOB格式存储, 但在提取图片时,始终无法在android界面显示,示例代码如下: .....  .... ...

  9. paip.gch预编译头不生效的原因以及解决:

    paip.gch预编译头不生效的原因以及解决: 作者Attilax ,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.net/a ...

  10. js上拉加载、下拉刷新的插件

    之前在网上找那种下拉刷新,上拉加载的插件,有一款IScroll,但是用起来太麻烦,于是就自己写了款,但依赖于jquery.js,bug肯定有,希望评论提出. js: /* 简洁的下拉刷新,上拉加载插件 ...