CSS：如何使用CSS伪类:before和:after来使用图像精灵
我以前从未尝试过这个。我创建了一个图像精灵，其中包含两个图标。每个图标的宽度和高度均为26px。因此，精灵的大小为26x52px。 我有一个元素，它可能在div.something或div.anything中。根据它属于哪个类，我想在左侧或右侧添加一个角标。 因此，我将 .element ...
CSS Sprite图的高度/宽度是否存在限制？
首先声明，我意识到对于大型图像使用CSS Sprites的争议。我甚至在这里提出了一个问题，询问为什么这可能是个坏主意（并发布了我的答案）。现在我们已经讨论过了... 我要制作一个大型CSS Sprite地图。为了制作这个Sprite地图，我需要知道浏览器能够正确处理的Sprite图片的高度...
CSS精灵和重复背景
我想把所有的小图片都存放在一个精灵文件中，例如： 现在假设我想要添加一个细长的背景图片来repeat-x 100%元素的宽度: 这必须作为单独实体存储吗？还是我可以将其存储在精灵图像中？我无法确定是否可以在精灵的某个部分上进行 background-repeat，我认为不行，但我很...
浏览器/CSS规范中的最大图像尺寸是多少？
我想展示包含大约6000个微小图像缩略图（每个为40x40）。为避免进行6000个HTTP请求，我正在探索CSS精灵，即将所有这些缩略图连接成一条长条，并使用CSS来裁剪所需的图像。不幸的是，我发现JPEG文件在任何一个维度上都不能大于65500像素。由于对Web堆栈中的进一步限制持谨慎态度，...
如何将CDN加速技术应用于图标？
现在使用CDN来缓存javascript、css、字体等已经成为普遍做法，但是相对于其他内容，图标好像没有得到同样的扩展（可能因为每个网站都希望有独特的外观和感受）。 是否有一些广泛使用的图标集，由CDN托管，并且足够常见以提供显著的速度改进，同时这些图标通过使用同一CDN的另一个站点进行预...
IE9/8/7 CSS精灵位置偏移问题
我想要使用CSS sprite（雪碧图总宽度为45px，总高度为15px，由三个图像组成），但在IE9/8/7中存在问题。链接和悬停效果正常，但当点击按钮（活动状态）时，雪碧图向左滑动1像素。这个问题只出现在IE 9/8/7中。我该如何解决？ CSS： body{ margin:...
图像精灵比单独的图像更高效吗？
我大约两年前开始使用图像精灵，因为我看到苹果和Facebook等网站在其网站上使用它们。 毫无疑问，如果您下载一个60kb的图像，而不是三个20kb的图像，则加载页面更快，但是，最近有人告诉我，尽管精灵在加载时速度更快，但实际上在客户端方面会消耗更多内存。 在我的眼中： 精灵的加载速度...
使用CSS Sprites在Web应用程序中的优势是什么？
我正在处理一个流量相对较大的网站，并考虑使用CSS精灵来减少其设计中的图像加载次数。 除了减少传输数据量外，使用CSS精灵还有什么优点？你能节省多少空间？在哪个阈值下使用CSS精灵才会对网站有益？ 更新：感谢您的回答。它们都非常经过深思熟虑，提供了好的资料来验证您的观点。现在我感觉更能够做...
使用HTTP/2单独加载图片比使用类似HTTP/1.1的精灵图同时加载所有图片慢的情况是什么？
HTTP/2使多路连接成为可能，消除了需要向服务器建立多个连接的需求。通过单一连接，可以将许多独立的图像发送到客户端。这消除了以前的图像精灵模式，即将许多图像合并成一个，并使用CSS将其分开的方法。 我很好奇在HTTP/2世界里，图像精灵是否仍然会更快。如果是这样，在什么情况下呢？
CSS精灵如何加速网站？
我试图理解CSS精灵如何提高网站性能？ 为什么下载多个小图片比下载一个包含这些小图片的单个图片更慢，即使单个图片的总大小等于这些小图片的总和？