CSS精灵技术，CSS背景或图片的裁剪。
有两种图像精灵技术。 “经典”版本使用background和background-position CSS属性（如此描述：http://www.alistapart.com/articles/sprites）。 “第二个”版本使用图像标记及其剪辑CSS属性（http://css-tricks....
CSS雪碧图的浏览器渲染
我们都知道CSS sprite图像可以很好地减少请求的数量等，但是如果有多个元素使用一个大图像作为背景，浏览器渲染页面的性能又如何呢？
如何让一个DIV像IMG一样运作，以便用作CSS精灵？
我编写了一段代码，根据页面中的IMG标签自动创建CSS精灵，并用DIV替换它们，使用适当的CSS将精灵图像定位为背景，以显示适当的部分 - 问题是我无法让DIV作为IMG的替代品。如果我保留默认的"display"值设置为"block"，那么如果原始IMG被定位在某些文本的末尾，替换的DIV将...
Firefox和Chrome在显示了655张图像后停止显示我的精灵。
问题 你好，我正在使用精灵图，并且遇到了一些有趣的问题：在 Firefox 和 Chrome 中，当我的精灵图包含655张图片或更少时，精灵图可以正常显示。但是，当它超过 656 张图片时，精灵图将不会被展示（只是变得看不见了）。我猜测这个问题不在我的代码中，因为它在 Opera 和 IE ...
jQuery切换以更改图像
我有一个装有图片的div列表:<div class="wizard-img"><%= image_tag("sources/pix/nyt.png") %></div> <div class="wizard-img"><%= image_t...
CSS精灵图中的图像之间必须有X个空格吗？
我有一个问题，已经有一段时间了，我一直在尝试解决这个问题。我将在下面很好地描述它... 我试图将图像用作UL列表的精灵图像。 它应该显示一个带有文本的图标，图标和文本都应链接到某个位置。 我的第一个示例看起来像我想要的。 当字体大小设置为10px时，它看起来还不错... 一旦我将字体大...
当在Chrome上缩放时，图像精灵会变得不对齐。
在Chrome浏览器中，当你缩放时，带有图像精灵的图标会变得不对齐。随着你向下滚动背景图像，位置似乎会稍微下降。这只会在Chrome浏览器中发生。 以下是CSS代码:.feature-icon { height: 22px; width: 22px; displ...
为什么不将页面内容中的大图像制作成雪碧图？
使用CSS精灵图来处理图片的一般规则是，只应该对较小的图片（如图标）使用，而实际的图片内容应该始终通过 <img> 元素表示。 我的问题是：为什么？难道使用精灵图的优点在处理内容图片时不值得吗？ 我读过的一个原因是为了启用 alt 文本，以更符合语法和屏幕阅读器的可访问性。然而，...
如何移除或禁用before和after伪类？
这似乎非常琐碎，但我无法解决它。在IE8上，仅使用display:none进行覆盖不起作用。#selector::after { display: none; } 我正在修改一个使用before和after伪类来添加图像精灵的主题。
CSS雪碧图的最佳实践
我正在寻找一些在构建CSS图像精灵时的最佳实践和提示。 我应该将大小相近的图像分组并放入一个png中吗？ 可接受的精灵图像大小是多少？是否建议制作不同的精灵图像，而不是一个巨大的文件？！ 有没有关于一个精灵图像中图像数量的建议？！ 将图像放置和对齐到精灵图像中是否有任何区别？我在http:...