CSS中的背景图片定位[转载]

写在转载前:CSS中的背景图的定位最重要的就是开始的坐标位置了,开始的坐标位置定好了,其他的也就很轻松了。最主要的就是你要设置好你的div的大小。利用CSS定位背景图的目的是为了将N多的图片放到一张大图里面,从而减少对图片的请求。

1. 关键字, 例如: background-position: top right;

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

2. 像素, 例如: background-position: 0px 0px;

优点: 概念容易被理解, 只要知道如何测量容器左上角和图片左上角之间的距离, 就能准确地推测出图片显示的位置. 像素还能够精确的用数学来控制定位.
缺点: 你必须知道确实的值.

原理, 如图. 其实就是图片左上角相对于容器左上角的坐标关系.

像素

3. 百分比, 例如: background-position: 80% 50%;

优点: 可以使用数学来控制定位, 并且比像素定位更加灵活.
缺点: IE 中无法处理复杂的百分比定位. 你可以看看这个测试.

原理, 如图. 与像素定位不同, 它的百分比位置是指容器和图片内部的相应位置作为显示的位置.

百分比

本文来自:neoease

CSS中的背景图片定位[转载]》上有3条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

嗯,想看到验证码,你得开javascript