Question

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

我有一个使用带锚标记的div的tile布局，现在我有一个类用于每个图像，它将它定位在tile锚标记的某个位置。每个图块的图像定位都不一样。

如果我使用精灵，我如何在图块中唯一地定位图像？通过设置x y坐标我只是设置图像在精灵上的位置，而不是它应该在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%"
});

我想使用图像精灵，但我不确定它是否可行

2 个答案: