规则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. EntityFramework 插件之EntityFramework.Extended (批量处理)

    接手了一个用EF来做的项目,由于项目中使用的原生处理,导致很多update都是采用先select 后 update的方式来实现,同时无法批量执行逻辑如:根据订单类型统一更新状态等.所以在经过了N多查找 ...

  2. 您好,想问一下目前哪些营业厅可以办理NFC-SIM卡的更换业务?_百度知道

    您好,想问一下目前哪些营业厅可以办理NFC-SIM卡的更换业务?_百度知道     您好,想问一下目前哪些营业厅可以办理NFC-SIM卡的更换业务?    2013-06-14 10:39 maxre ...

  3. java中字符串的比较

    compareTo方法是比较两个字符串的词典顺序  也就是在字典中的顺序,比如“abcd”在“acdb”前面 大于返回1,小于返回-1 equals:比较两字符串的内容是否相同. 相同返回1,不同返回 ...

  4. 利用PyQt4写的小工具软件

    应公司文职工作人员需求,写一个车间人员工作时间的统计软件,输入开始工作时间1,再输入结束工作时间2,计算两个时间的差值. 根据需求,初步构想的UI界面如下: 下面开始干活. 分析后觉得利用PyQt4来 ...

  5. 解决本地软件链接不上虚拟机mysql 的问题:grant all privileges on *.* to 'root'@'%' identified by 'nsfocus'

    mysql> GRANT ALL PRIVILEGES ON *.* TO 'root'@'localhost' ->     IDENTIFIED BY 'some_pass' WITH ...

  6. Citrix 服务器虚拟化之十三 Xenserver虚拟机内存优化与性能监控

    Citrix 服务器虚拟化之十三   Xenserver虚拟机内存优化与性能监控 XenServer的DMC通过自动调节运行的虚拟机的内存,每个VM分配给指定的最小和最大内存值之间,以保证性能并允许每 ...

  7. 在Mac中安装.Net Core的开发环境

    在mac中部署dotnet core开发环境,我的MacOS版本号为OSX EI Capitan 10.11.6 1.安装brew homebrew官网推荐的安装命令如下: /usr/bin/ruby ...

  8. [转] 用source命令执行脚本和用sh执行脚本之间的区别

    from: http://blog.csdn.net/david_xtd/article/details/8012627 问题: 有很多方式可以执行脚本, 1).source test.bsh 2). ...

  9. git 取消追踪

    git rm --cached filePath这个操作不会删除这个文件

  10. Citrix Presentation server can not contact the license server

    If you come across the above error,  you may also come across one or more of the errors below within ...