带有 <img> 标签的精灵答案

【问题标题】：Sprite with <img> tag带有 <img> 标签的精灵
【发布时间】：2016-04-24 14:33:55
【问题描述】：

如果我正确理解 sprite 的概念，它是为了减少 HTTP 请求。当我使用<span>、<i> 或<div> 时，这是有道理的，因为我可以给几个元素一个类并给那个类background-image。这样浏览器只请求一次图像。但是如何使用 img 标签？ src 属性不能为空，所以如果我这样设置三个图像：

<img id="first" src="img-sprite.png" alt="" />
<img id="second" src="img-sprite.png" alt="" />
<img id="third" src="img-sprite.png" alt="" />

基本上我在这里有三个不同的请求。三个请求相同图像的请求，但仍然是三个。有人可以请教我。

谢谢！

【问题讨论】：

浏览器足够智能，可以只发出一个请求并重复使用同一张图片。
我希望有一个选项可以查看为什么人们会否决一个问题，我真的很想知道我的问题有什么问题。无论如何，谢谢@Juhana

标签： html css sprite css-sprites

【解决方案1】：

图像精灵用于许多使用多个图像的网络应用程序。与其将每个图像作为单独的图像文件包含，不如将它们作为单个图像发送对内存和带宽更友好，因此减少了 HTTP 请求的数量。

Implementing image sprites in CSS

【讨论】：