css - 从图像表中读取图像

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

这应该做你需要的：

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" />​

Answer 4

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