css - 我想使用 img sprites 但我不确定是否可行

Question

我想使用图像精灵来提高性能，但在这种情况下我该怎么做？

我有一个使用带有锚标签的 div 的平铺布局，现在我为每个图像都有一个类，将其放置在平铺锚标签上的某个位置。每个图块的图像位置不会相同。

如果我使用精灵，我将如何在图块中唯一地定位图像？通过设置 xy 坐标，我只是设置图像在精灵上的位置，而不是它应该在 div 中的位置，对吗？

示例 HTML：

<div class="tileFlip"> 
    <a class="size4 red i-projects">
        <h1>Project Portfolio</h1>
    </a>
</div>

示例 CSS：

.i-projects {
    background-image: url('../../../img/icons/projects.png');
    background-repeat: no-repeat;
    background-position: 49% 80%;
}

Answer 1

您在正确的轨道上，您需要做的就是声明位置差异。

.i-projects {
    background-image: url('../../../img/icons/projects.png');
    background-repeat: no-repeat;
    display:block;
    background-position: 49% 80%;
}

.i-projects .green{
    background-position: 69% 40%;
}

对于此类应用程序，位置通常以像素表示，它们指的是背景精灵的位置。

Answer 2

如果图块要动态更改，则必须使用 Javascript 来动态调整 CSS。例如，使用 jQuery 你可以这样做：

$(oneOfThoseDivs).css({
    backgroundImage: 'url("../../../img/icons/projects.png")',
    backgroundRepeat: "no-repeat",
    backgroundPosition: "49% 80%"
});