css - Sprite 和长文本

Question

许多编码人员都喜欢 sprite，但他们似乎忘记了 sprite 需要更多或更少的固定容器。如果您无法控制它的高度，则不能在 h2 上使用 srite。当您有 1 (2) 行文本时，H2 看起来不错，但是当您有 3 行时，H2 看起来很糟糕—— Sprite 中的下一张图像变得可见。

修复它的最佳解决方案是什么？容器内的图标？

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

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

你的解决方案是什么？

Answer 1

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

如果宽度和高度都不可变，则放置图像 Sprite 中的任何位置。

---

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

---

如果宽度可变但高度固定，您可以尝试将背景沿 Sprite 的顶部或底部边缘放置。这将允许您重复 x。

---

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