爲什麼我的背景圖片不會在元素上發生變化？

我正在嘗試使用寬度爲3像素，高度爲89像素的單個背景圖像。每個1像素垂直條紋將是不同的背景div。爲什麼我的背景圖片不會在元素上發生變化？

我假定由-1px 0移位background-position和設置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

來源

2013-03-11 ZeroDivide

難道你真的拼出來「背景重複」？ – Pointy 2013-03-11 15:25:01

這是一個錯字，但沒有造成問題。 – ZeroDivide 2013-03-11 16:46:58

你拼寫錯誤的重複。

$(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

來源

2013-03-11 15:27:04

使用的背景大小的CSS屬性，你不能使用圖像的一部分作爲背景。 background-size會將圖像縮放爲給定的大小，但不會佔用它的一部分。背景位置將應用於整個背景，而不是重複圖像的個別部分。所以你可以不重複1px * 89px的3px * 89px水平。你可以試試這個在http://www.w3schools.com/cssref/css3_pr_background-size.asp 和另外一件事情要注意它背景大小將不會在IE9下工作。

這樣做的一個快速的解決方案是使用Photoshop或油漆削減圖像分成3個部分1px的* 89px並垂直粘貼，你可以使用background-position，適當現在的位置值底色重複進行水平重複

來源

2013-03-11 15:34:56

OP不想裁剪/剪切圖像。 ?? – 2013-03-11 15:49:06

是的，我正在試圖裁剪它們。最終結果將是三個盒子，每個盒子的背景顏色略有不同。我想我可以使用三個單獨的圖像，但我認爲spritesheet方法會更好。 – ZeroDivide 2013-03-11 16:45:34

@ZeroDivide啊......我明白了。 – 2013-03-11 16:48:27

爲什麼我的背景圖片不會在元素上發生變化？

回答

相關問題