Question

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

我认为将background-position移到-1px 0并将background-size设置为1px 89px会改变每个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

Answer 1

你拼错了重复。

$(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为你做到了。

Updated Fiddle

Answer 2

您无法使用背景大小的CSS属性将图像的一部分用作背景。 background-size会将图像缩放到给定的大小，它不会占用它的一部分。和背景位置将应用于整个背景，而不是重复图像的单个部分。所以你可以水平重复1px * 89px的3px * 89px。你可以在http://www.w3schools.com/cssref/css3_pr_background-size.asp试试这个还有一件事要注意它背景大小在IE9下面不起作用。

快速解决这个问题的方法是使用Photoshop或者将图像分成3个部分1px * 89px并垂直粘贴它们，你可以使用背景位置，背景重复和适当的位置值来水平重复它

为什么我的背景图片在元素上没有变化？

2 个答案: