0

パフォーマンスのためにイメージ スプライトを使用したいのですが、この状況ではどのようにすればよいでしょうか?

アンカー タグ付きの 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%;
}
4

2 に答える 2

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%;
}

このタイプのアプリケーションでは、通常、位置はピクセルで表され、背景スプライトの位置を参照します。

于 2012-12-03T21:17:23.617 に答える
0

タイルが動的に変化する場合は、JavaScript を使用して CSS を動的に調整する必要があります。たとえば、jQuery を使用すると、次のことができます。

$(oneOfThoseDivs).css({
    backgroundImage: 'url("../../../img/icons/projects.png")',
    backgroundRepeat: "no-repeat",
    backgroundPosition: "49% 80%"
});
于 2012-12-03T21:17:42.037 に答える