使用CSS中取图集中的
一个图
在CSS中，我们可以使用background-image
属性来设置
一个元素的背景图像。当我们需要从图集中取出
一个特定的
图片时，可以通过CSS中指定图像位置和大小来实现。下面就来看看如何做到它。
首先，我们需要确定要取出的
图片在图集中的位置。假设我们从
一个名为“images.png”的图像集中要取得
一个宽50像素，高50像素的图像，它在集合中的位置为从
左上角算起的第6个图像。那么我们可以使用以下CSS
代码：
pre {
white-space: pre-wrap;
}
p {
margin-top: 0;
}
div {
width: 50px;
height: 50px;
background-image: url('images.png');
background-position: -150px 0; /* 根据
图片宽高和位置计算 */
}
在上面的
代码中，我们首先使用pre
标签来包裹我们的
代码块，以使
代码能够以编写样式的方式
显示。接着，我们在p
标签中
添加了
一个margin-top
属性，以避免
代码段的顶部出现不必要的距离。
我们的实际
代码在
一个div元素中，它具有50像素的宽度和高度，并且我们在背景图像的URL中指定了图像集的
名称。然后，我们使用background-position
属性来指定要在图像集中找到图像的位置，而x坐标为-150像素，因为我们假设每个
图片宽度为50像素，所以要移动6个
图片。
最后，我们可以在我们的div元素中
添加一些其他的样式，以使其符合我们的
页面设计需求。但是，这里的核心是使用CSS的background-position
属性来指定要取图集中的哪个图像，然后通过调整CSS中的大小或位置值来调整实际
显示的大小和位置。
综上，通过指定图像位置和大小，我们可以在CSS中从图集中取出想要的单个图像。
