精灵图和长文本

Question

3

许多程序员喜欢使用精灵图，但他们似乎忘记了精灵图需要更多或更少固定的容器。如果你无法控制h2的高度，就不能在h2上使用精灵图。当你有1（2）行文本时，h2看起来很好，但当你有3行时，灾难就来了——来自精灵图的下一张图片变得可见。

最好的解决方案是什么？将图标放在它的容器内？

<h2>
    <span class="ico">Text that needs to be hidden</span>
    Lorem ipsum<br />dolor sit<br />amet
</h2>

另一种解决方案是将图像对角线放置在精灵文件上，但这种解决方案不允许100%的0定位。

你有什么解决方案吗？

- fallenboy

1

我认为答案是不要为具有可变宽度或高度的元素使用精灵。您不必将每个图像都放在精灵中。 - punkrockbuddyholly

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jon Newmuis · Accepted Answer

请注意下图中红色部分的定位。

如果宽度和高度都不变，则可将图片放置在雪碧图的任何位置。

当高度可变但宽度固定时，您可以尝试将背景沿着雪碧图的左侧或右侧放置。这样可以实现repeat-y。

如果宽度可变但高度固定，则可以尝试将背景沿着雪碧图的顶部或底部边缘放置。这样可以实现repeat-x。

如果宽度和高度都可变，则我认为您不能有效地在雪碧图中使用图像。您应该只使用标准背景图像。