Question

css 背景图片的定位？

请问有哪位有关于css 背景图片的定位的教程给推荐几个不？
我是刚刚接触css!
谢谢啊！！！

Answer 1

1. 关键字, 例如: background-position: top right;
   优点: 直观, 可用性高, 各浏览器中表现一致.
   缺点: 缺少间隔尺寸. 三个垂直的 (top, center, bottom) 和三个水平的 (left, center, right) 只能为你组合出最多 9 个位置. 不存在其他混式的组合. 并且很难像其他两种数值定位方法一样使用算数进行控制

2.  像素, 例如: background-position: 0px 0px;
   优点: 概念容易被理解, 只要知道如何测量容器左上角和图片左上角之间的距离, 就能准确地推测出图片显示的位置. 像素还能够精确的用数学来控制定位.
   缺点: 你必须知道确实的值.
   原理, 如图. 其实就是图片左上角相对于容器左上角的坐标关系.
   
   

3. 百分比, 例如: background-position: 80% 50%;
   优点: 可以使用数学来控制定位, 并且比像素定位更加灵活.
   缺点: IE 中无法处理复杂的百分比定位. 
   原理, 如图. 与像素定位不同, 它的百分比位置是指容器和图片内部的相应位置作为显示的位置.
   
   

Answer 2

背景定位使用background-position:h v;其中，h 表示水平位置，取值left、center、right，也可用具体像素（相对左边）或者百分比；v 则表示垂直定位，取值top、center、bottom，也可用具体像素（相对上边）或百分比。

Answer 3

在CSS中，背景图片的定位方法有3种：
1）关键字：background-position: top left;
2）像素：background-position: 0px 0px;
3）百分比：background-position: 0% 0%;
示例我就不多说了！
看这篇教程：