0

スパンがあり、そのスタイルを以下に示します。私の問題は、60px*60px のスパンを埋めるように設計されていることです。しかし今、別のスパンを 50px*50px サイズで埋めなければなりません。しかし、背景のサイズを変更すると、すべての位置がずれてしまうため、背景の位置では機能しません。では、画像が描画された後に bacground-image を使用して画像またはブロック要素のサイズを変更する方法 (css または javascript ハック) はありますか? すべての背景位置の書き換えを避けたい (「.entertainment」のような各アイコンのクラスがあります)。

<span class="icon icon2 entertainment"></span>

span.icon2 {
 float: left;
 width: 50px;
 height: 50px;
 margin: 5px 0 0 0;
}

#wrapper span.icon.entertainment {
 background-position: -60px -360px;
}

#wrapper span.icon {
 background: url(https://teeg.hu/image/icon.png);
}

助けてくれてありがとう！

4

2 に答える 2

0

純粋な CSS ソリューションはありません。

js ソリューションがあります。あなたがしたように背景のサイズを変更し（background-size）、次に各要素のサイズ/ 2（あなたの場合は5px）の差で位置を移動します。

クラスを書き直すのではなく、要素を繰り返し処理するだけです。

注: これは大規模な操作になる可能性があります。回避したい場合でも、クラスを書き直すことをお勧めします (40 はそれほど多くはありません... せいぜい 30 分 - テストを含む)。

于 2013-04-26T11:41:54.007 に答える
0

わかりました、私はいくつかのハックを書きました。背景のサイズを変更しました：

background-size: 100px 1550px;

jQueryでそれを行いました：

 $(function() {
        $("span.icon2").each(function(index, value) {
            var pos = $(this).css("background-position").split(' ');
            var newPos = [];
            newPos[0] = parseInt(pos[0].replace("px", "")) / 60 * 50;
            newPos[1] = parseInt(pos[1].replace("px", "")) / 60 * 50;
            $(this).css("background-position", newPos[0] + "px " + newPos[1] + "px");
        });
    });
于 2013-04-26T11:51:28.853 に答える