html - 网格布局中每个 block 的背景图像 - 在 html 中没有 css

Question

我需要开发一个网格布局，每个 block 作为不同的图像(从数据库加载)，上面会出现一些文本。

我发现的唯一方法是在 html 中使用样式属性，即 html 中的 css，我认为这不是一个好的做法。此外，IE 似乎不支持背景大小。

有没有其他方法可以在每个 block 上实现具有不同图像的网格布局？

请帮忙。

Answer 1

内联属性不是一个很好的做法。使用 img 标记是最好的解决方法(浏览器支持、浏览器性能、维护)。

另一种方法是使用 data 属性和 javascript:

http://jsfiddle.net/julienvignolles/7wUwK/

HTML

<div class="image-container" data-image-url="/images/foo.jpg">…</div>

JavaScript

$('.image-container').each(function(i, el) {
    el = $(el);
    el.css('background-image', 'url(' + el.data('image-url') + ')');
});

background-size 浏览器支持(background-image 实际上):

http://caniuse.com/#search=background-size

有关旧 IE 支持的帖子:

How do I make background-size work in IE?