每个块的不同的图象在背景栅格

Question

嘿我正在试图想办法为我创建的网格的每个块创建不同的图像：

这是我的CSS：

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

我能想到的唯一方法就是制作一堆固定位置的图像标签，我试图找出一种更有效，更清洁的方式。我在jQuery的字典中有所有的图片网址。

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

您可以使用所有图片创建精灵。 将您的css类命名为＆＃34; image_001＆＃34; ... 并使用for循环，将css类添加到块

Answer 2

我认为你可以使用逗号分隔的多个背景图像。 所以也许这会奏效：

var faceDict = ["a whole bunch of urls"]
$('.face-container').css({backgroundImage: faceDict.join()});

btw似乎有非常好的浏览器支持： http://caniuse.com/#search=background