精灵和长文

Question

许多程序员都拥抱精灵,但他们似乎忘了精灵需要更多的固定容器.如果你无法控制它的高度,你不能在h2上使用srite.当你有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定位.

你的解决方案是什么？

Answer 1

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

如果宽度和高度都不变,请将图像放在精灵中的任何位置.

如果高度可变但宽度固定,您可以尝试沿精灵的左边缘或右边缘放置背景.这将允许你重复y.

如果宽度可变但高度固定,您可以尝试沿精灵的顶部或底部边缘放置背景.这将允许你重复-x.

如果宽度和高度都是可变的,我不相信你可以有效地使用精灵中的图像.您应该只使用标准背景图像.