css sprites确定小图在整图中的位置:
现在有一张已经拼合好的图片,我们只需要使用其中的一个小图,例如我们要选取日历小图片,可以这样做
1、确定小图的大小,大约宽28px高 28px(width:28px;height:28px)
2、确定小图的左上角距离大图的左上角的高度和宽度,高度123px,宽50px(background-position:-50px -123px;)
3、为了使得图片不重复显示,要注意的是添加no-repeat属性和overflow:hidden,display:block或者是display:inline-block
<style>
span{
background-image:url(icons.png);
background-repeat:no-repeat;
width:28px;
height:28px;
background-position:-50px -123px;
display:block;
overflow:hidden;
}
</style>
</head>
<body>
<span></span>
最后你的span中显示的图片就是这样的