<分区>
标签 javascript jquery html css
<分区>
我正在尝试使用 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"
});
});
})();
这是一个显示我正在尝试做的事情的 fiddle 。
=======================================
这是图片的链接:
最佳答案
你拼错了 repeat.
$(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 会为您做到这一点。
关于javascript - 为什么我的背景图片在某个元素上没有变化？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15342308/