0

幅 3 ピクセル、高さ 89 ピクセルの単一の背景画像を使用しようとしています。各 1 ピクセルの縦ストライプは、異なる の背景になりますdiv。

background-positionbyをシフトしてto-1px 0を設定すると、それぞれの背景画像が変わると思いましたが、そうではありません。背景CSSを設定するJavaScriptです。background-size1px 89pxdiv

(function () {
jQuery(".featuredBox").each(function (index, elem) {
    jQuery(elem).css({
        "background-image": "url(http://i.imgur.com/mC7DQlt.png)",
            "background-position": -index + "px 0",
            "background-repeate": "repeat-x",
            "background-size": "1px 89px"
    });
});
})();

これは、私がやろうとしていることを示すフィドルです。

http://jsfiddle.net/DGWsD/

=======================================

画像へのリンクは次のとおりです。

http://i.imgur.com/mC7DQlt.png

4

2 に答える 2

4

繰り返しのスペルを間違えました。

$(document).ready(function () {
    $(".featuredBox").each(function (index, elem) {
        $(elem).css({
            "background-image": "url(http://i.imgur.com/mC7DQlt.png)",
            "background-position": -index + "px 0",
            "background-repeat": "repeat-x",
            "background-size": "1px 89px"
        });
    });
});

()また、関数の最後で式をすぐに呼び出す必要もありません。jQuery がそれを行います。

更新されたフィドル

于 2013-03-11T15:27:04.707 に答える
1

background-size CSS プロパティを使用して、画像の一部を背景として使用することはできません。background-size は、画像の一部を取らない特定のサイズに画像をスケーリングします。また、background-position は、繰り返し画像の個々の部分ではなく、背景全体に適用されます。したがって、水平方向に 3px*89px の 1px*89px を繰り返すことはできません。http://www.w3schools.com/cssref/css3_pr_background-size.aspでこれを試すことができます。 また、background-size は IE9 未満では機能しないことに注意してください。

これに対する簡単な解決策は、フォトショップまたはペイントを使用して画像を 1px*89px の 3 つの部分にカットし、それらを垂直に貼り付けることでした。適切な位置の値で background-position,backround-repeat を使用して、水平方向に繰り返すことができます。

于 2013-03-11T15:34:56.740 に答える