使用内联图像的 CSS Sprites

CSS Sprites 是一种技术，它使用背景图像、一组宽度和高度，并调整背景位置以仅显示需要显示的部分。这样，您可以使用单个图像显示许多不同的图形，从而节省服务器请求并加快页面加载时间。

“精灵”是单个组合的图形。我们可以使用相同的理论，只是不使用 background-image 来显示图形，而是在 HTML 本身中使用图像（内联图像）。

 

查看演示

 

为什么？

我不知道我是否有完美的答案。这主要只是一个概念证明和如何使用 CSS 的演示剪辑属性。虽然，内联图像与具有背景的 div 本质上不同。图像为“内容”，而空 div 则不是。

CSS 剪辑

理论是使用剪辑CSS 的属性来修剪图像，以仅显示需要显示的部分。准备图像与创建任何其他 CSS 精灵相同

您可以使用常规 HTML 显示它，并为其提供我们将使用的几个类名

<img src="images/arrow-sprite.png" alt="arrow" class="clip pos-1" />

为了使用 CSS 剪辑，元素**必须**是绝对定位的，因此我们将使用通用“clip”类执行此操作，并应用一些默认/必需的顶部和左侧值。然后，我们将为精灵中的每个不同图像设置一个类名。每个图像一个位置类名

.clip               { position: absolute; top: 0; left: 0; }
		
.pos-1              { clip:rect(0 48px 48px 0); }
.pos-2              { clip:rect(0 96px 48px 48px); left: -48px; }
.pos-3              { clip:rect(48px 48px 96px 0); top: -48px; }
.pos-4              { clip:rect(48px 96px 96px 48px); top: -48px; 
                      left: -48px; }

请注意为不同位置应用的负顶部和左侧值。这对于将图像移回预期显示的标准位置是必要的。您从顶部和左侧剪切掉多少图像，就将其向上和向左移动多远。这是因为图像将占用与整个精灵相同的空间，只是它的一部分不会出现。但是由于绝对定位，这个额外的空间不会影响任何其他东西，我们可以将其轻轻推回原位而不会影响任何其他东西。

每个“位置”都遵循简写形式的矩形模式，就像边距或填充使用简写形式一样：顶部、右侧、底部、左侧。**公平警告…**这写起来可能有点奇怪。写顶部、左侧、底部、右侧，就像 X、Y 坐标，感觉更自然，但这并不是它的工作原理。

它必须使用绝对定位，这一点有点限制。如果您想将图像保留为文档常规流的一部分，您可以始终将图像包装在具有相对定位的 div 中。

<div class="clipwrapper">
   <img src="images/arrow-sprite.png" alt="arrow" class="clip pos-1" />
</div>

.clipwrapper        { position: relative; height: 48px; width: 48px; }

相同服务器的使用

浏览器足够智能，知道如果在页面上的多个位置使用相同的图像，它仍然只需要加载一次。与传统的 CSS 精灵一样高效。看，只有一个资源

浏览器兼容性

这在 IE 6、7 和 8 以及我尝试过所有好的浏览器中都有效。这使得它在各方面都绝对可用。

注意：CSS 规范要求在 clip 属性中的值之间使用逗号，但显然旧版 IE 不喜欢它们，并且在较新的浏览器中没有它们也能正常工作。