规则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. Chrome extension

    PageSpeed Tincr SpriteMe JSONView FireMobileSimulator for Google Chrome™

  2. CLOUDSTACK我也来啦

    最近,专业客户需要私有云和自助管理. 那我就倒一个CLOUDSTACK出来吧. WEB UI已搞定. 难点在于高级网络和主存储.再接再力. ... 因为要反复重装,在服务端有个快速重建步骤: serv ...

  3. Keil uVISION2 自学教程

    Keil  uVISION2  是众多单片机应用开发软件中优秀的软件之一,它支持众多不同公司的 MCS-51 架构的芯片,它集编辑,编译,仿真等于一体,同时还支持.PLM.汇编和 C 语言的程序设计, ...

  4. Ubuntu14.04 安装QQ国际版wine-qqintl

    Ubuntu14.04安装qq国际版方式: 首先下载,链接为:  https://pan.baidu.com/s/1boPitVD 密码:jp1j 也可去Ubuntu中文的Kylin(优麒麟)官网下载 ...

  5. UVA127- "Accordian" Patience(模拟链表)

    "Accordian" Patience You are to simulate the playing of games of ``Accordian'' patience, t ...

  6. [转载]Android相关开发网站

    my: Android 开发官方文档国内镜像-踏得网: http://wear.techbrood.com/index.html 转载自: http://my.oschina.net/luforn/b ...

  7. js打开新的链接

    当前页面打开一个链接:window.location="URL" 打开一个新的页面,再打开一个新的链接:window.open(URL,窗口名称,窗口风格) window对象具有如 ...

  8. java笔记13之成员变量与局部变量

    成员变量和局部变量的区别 1在类中的位置不同 局部变量:类的方法体内 成员变量:类的方法之外 2内存的不同位置 局部变量:在栈内存中 成员位置:在堆内存 3生命周期不同 局部变量:随着方法的调用而存在 ...

  9. (转)Maven实战(五)坐标详解

    1.为什么要定义Maven坐标      在我们开发Maven项目的时候,需要为其定义适当的坐标,这是Maven强制要求的.在这个基础上,其他Maven项目才能应用该项目生成的构件. 2.Maven坐 ...

  10. icinga 被动模式 nsca 安装

    本文假设读者已安装好icinga,此外nsca本身nagios插件,icinga/nagios都适用 一.编译安装nsca1.编译,拷贝文件tar -vxzf nsca-2.7.2.tar.gz./c ...