0

我正在尝试使用 3 像素宽和 89 像素高的单个背景图像。每个 1 像素的垂直条纹将是不同的背景div。

我假设将background-positionby-1px 0和设置为background-sizeto1px 89px会改变 each 上的背景图像div，但事实并非如此。这是设置背景css的javascript。

(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试试这个， 还有一件事要注意它的背景大小在 IE9 下不起作用。

一个快速的解决方案是使用 Photoshop 或油漆将图像切成 3 部分 1px*89px 并垂直粘贴它们，您可以使用 background-position,backround-repeat 和适当的位置值来水平重复它

于 2013-03-11T15:34:56.740 回答