规则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常规练习B

    package com.hengheng.scala class Point(val x : Int, val y : Int) { val isOriginal : Boolean = { x == ...

  2. ISO7816协议的块传输协议

    1.块传输协议中的前三个字节是强制必须有的 NAD节点地址: 当终端支持多个卡槽,终端和这些卡槽以总线的方式通讯时,该字节有用,其他情况下,默认为0 bit1-3:定义了源地址 bit5-7:定义了目 ...

  3. mysqldump 一些参数体验

    mysqldump -uroot -p'xxx' -R --single-transaction --master-data=2 zjzc>$TODAY_DIR/zjzc/zjzc_${TODA ...

  4. HashTable与HashMap使用总结

    1.HashTable和HashMap比较 1)继承的父类不同. Hashtable继承自Dictionary类,而HashMap继承自AbstractMap类.但二者都实现了Map接口. publi ...

  5. php 环境搭建注意事项

    安装php 环境,最后安装集成环境,因为 apache+php 互联不是很容易. 这里主要是两个工具集成工具(wamp ,AppServ),其实这两个集成环境都包括(apache+mysql+php) ...

  6. 20个Linux服务器性能调优技巧

    Linux是一种开源操作系统,它支持各种硬件平台,Linux服务器全球知名,它和Windows之间最主要的差异在于,Linux服务器默认情况下一般不提供GUI(图形用户界面),而是命令行界面,它的主要 ...

  7. G - Oil Skimming - hdu 4185(二分图匹配)

    题意:在大海里有一些石油 ‘#’表示石油, ‘.’表示水,有个人有一个工具可以回收这些石油,不过只能回收1*2大小的石油块,里面不能含有海水,要不就没办法使用了,求出来最多能回收多少块石油 分析:先把 ...

  8. Tomcat部署问题及解决方法

    1.gradle构建web时报错:Access restriction: The type JPEGImageEncoder is not accessible due to restriction ...

  9. php缓存小技巧

    1.缓存数组到文件: <?php $arr = array(2,3,5,76,7,8,22); $data = "<?php\nreturn ".var_export( ...

  10. 构建基于Javascript的移动web CMS——加入jQuery插件

    当看到墨颀 CMS的菜单,变成一个工具栏的时候.变认为这一切有了意义.于是就继续看看这样一个CMS的边栏是怎么组成的. RequireJS与jQuery 插件演示样例 一个简单的组合示比例如以下所看到 ...