从图像表中读取图像

Question

我有一个像这个链接中的图像表（http://jquerytools.org/media/img/demo-navi.jpg）。

我只想获得该图片的一个组成部分。

我们如何只获得CSS中的图像组件？

Answer 1

正确的术语是CSS Sprite。

您可以使用背景定位来实现这一目标：

div
{
    background-image:url('http://jquerytools.org/media/img/demo-navi.jpg');
    background-position:-20px 80px;
    width:100px;
    height:80px;
}​​​

http://jsfiddle.net/Lz46r/

Answer 2

您可以尝试：http://www.guistuff.com/css/css_imagetech1.html

裁剪X和Y

第一张照片是一种垒球。所有酷孩子都知道如何利用在两个轴上裁剪图像。这样做有几个原因：例如，您可能拥有不同大小的图像，并希望将所有图像放在一个文件中。如果仅在一个轴上裁剪，则将保存一个文件，该文件具有您要使用的图像数组的最大可能宽度或高度。此外，您可能希望在PNG文件格式中使用压缩元素，例如在同一水平行中保留具有相同背景颜色的图像，然后使用多行。 不管是什么原因，实际上没有比我们迄今为止看到的更多。这是另一个示例图像：

.icons 
{ 
display: block; 
width: 40px; 
height: 40px; 
background-image: url(images/sixicons.png); 
background-repeat: no-repeat; 
}

您可以从此课程中推断出每个图标的宽度和高度为40像素，图像文件名称为sixicons.png。在所有子图像具有相同尺寸的意义上，我这次没有为X / Y裁剪创建一个非常具有挑战性的示例。然而，正如你所看到的，即使它们不是，你仍然会使用一种相似的（虽然不是精确的）技术。

首先，让我们裁剪左上角的图标：

.icon_1 { background-position: 0px 0px; }

标记为：

<span class="icons icon_1"></span>

当然，这是最简单的一个。现在让我们说我们想要中间底部的图标：

.icon_5 { background-position: -40px -40px; }

让我们看看所有图标的CSS：

.icon_1 { background-position: 0px 0px; } 
.icon_2 { background-position: -40px 0px; } 
.icon_3 { background-position: -80px 0px; } 
.icon_4 { background-position: 0px -40px; } 
.icon_5 { background-position: -40px -40px; } 
.icon_6 { background-position: -80px -40px; }

Answer 3

您需要使用CSS Sprites。有一些非常简单的教程here。

Answer 4

这应该做你需要的：

http://jsfiddle.net/8Eucw/1/

<强> CSS：

#aBit {
 background-image: url('http://www.google.co.uk/images/nav_logo107.png');
 background-position-x: 114px;
 background-position-y: 63px;
 width: 18px;
 height: 18px;   
}​

<强> HTML：

<img src="http://www.google.co.uk/images/nav_logo107.png" /><br />
<hr />
<img id="aBit" />​