css - 如何使用纯 CSS 将基于百分比的定位应用于背景图像 Sprite ？

Question

我有一个带有按钮图标的 SVG Sprite 。这些图标将作为背景图像添加到 HTML 链接元素。

我想使用百分比来定位 Sprite ，但这很令人困惑。通过基于像素的定位，可以轻松确定位置。不幸的是，使用百分比时会发生以下情况:

• 0% 水平将 Sprite 的左侧与按钮的左侧对齐。
• 100% 水平偏移将 Sprite 的右侧与按钮的右侧对齐。

给定一个包含 8 个图标的 Sprite ，应用 50% 作为偏移量会导致按钮中显示第 4 个和第 5 个图标之间的空间。

去这里的正确方法是什么？

Answer 1

Sprite 的宽度取决于 Sprite 中图标(图像)的数量:一个图标(通常)应该是它必须覆盖的按钮宽度的 100%。因此对于 8 个图标:

background-position: 800%;

图标 i(第一个:i=1，第二个 i=2 等)与图标总数 n 的偏移量计算如下:

偏移百分比 = (i - 1/n - 1) * 100%

因此，对于 Sprite 第一行中的第 5 个图标 8，偏移量 = (5-1/8-1)*100% = 57,142 %

background-position: 57.142 top;

SASS 混合:

@mixin background-position($number: 1){
    $total: 8; /* The number of icons in the sprite, placed next to one another */
    background-size: percentage($total); /* Results in 800% for 8 icons */
        background-position: percentage( ($number - 1)/($total - 1) )  top; /* My sprite has the default state in the top row, :active states in the bottom */
}

使用 SASS 这样的预处理器，您可以灵活地在稍后阶段向 Sprite 添加图标，而无需更改所有先前计算的背景位置。

当然，这个解决方案适用于任何具有背景图像的元素，而不仅仅是按钮。