NingG +

CSS中背景图片定位

CSS Sprites简介

CSS Sprites是网页图片处理方式,将一个页面中涉及到的零星图片包含到一张大图中,目标:

使用图片做背景时,本质是使用属性:background-image组合background-repeatbackground-position等来实现。调整background-position即可实现,背景显示不同的图片,CSS Sprites (指包含了很多图标的一张背景图) 一般只能使用到固定大小的盒子(box)里,这样遮挡住不应该看到的部分。

p {
	width: 25px;
	height: 25px;
	background-image: url(../images/sprites.png);
	background-repeat: no-repeat;
	background-position: 0 -350px; 
	background-color: black;
}

特别说明:上述background-position对应的两个参数为,x、y的定位坐标点,可以通过画图类软件来查看sprites.png图片中不同小图标,所对应的坐标点。

优缺点

图片定位几种方式

几种方式:

简要介绍:

上面的位置,含义:相对于容器左上角的点,图片的左上角的点,之间位置关系,参考下图;只有在background-repeat: no-repeat;条件下,bacaground-position: 0px -23px;设置才有效。

几点:

参考来源

Top