javascript - 背景网格上每个 block 的不同图像

Question

嘿，我正在尝试找出一种方法，让我创建的网格的每个 block 都有不同的图像:

这是我的 CSS:

background-image: url("my_image.jpg");
background-size: 50px auto;
float: right;
height: 150px;
width: 34%;

我能想到的唯一方法是制作一堆具有固定位置的图像标签，我正在尝试找出一种更有效和更简洁的方法。我在 jQuery 的字典中获取了所有图像 url。

var faceDict = ["a whole bunch of urls"]
for (var faceIndex = 0; faceIndex < faceDict.length; faceIndex++) {
    $('.face-container').append("<img height='50' src='" + faceDict[faceIndex] + "'/>"); });

到目前为止我在 jFiddle 中得到的所有代码:http://jsfiddle.net/nUMDF/

Answer 1

你可以用你所有的图像创建一个 Sprite 。将您的 css 类命名为“image_001”...并使用 for 循环，将 css 类添加到 block 中