Question

我需要开发一个网格布局，每个块作为一个不同的图像（从数据库加载），一些文本将来到这个图像上。

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

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

请帮忙。

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?

Answer 2

我个人不会用这种方式制作不同图像的网格，我可能会使用背景图像来做，但是如果你想要一个文字分层覆盖图像的网格，这是一种使用z-indexing <的方法/ p>

FIDDLE http://jsfiddle.net/Dpr3C/

<强> HTML

<ul>
    <li><img src="http://www.hockeycanada.ca/Content/images/hockey_canada_640.jpg"><span>Words words</span></li>
    <li><img src="http://www.sports-logos-screensavers.com/user/USA_Hockey5.jpg"><span>Words words</span></li>
    <li><img src="http://marchhockey.files.wordpress.com/2013/06/russia-hockey-logo.gif"><span>Words words</span></li>
</ul>

<强> CSS

ul { list-style: none; margin: 0; padding: 0; }
ul li { width: 100px; height: 100px; float: left; margin: 5px; position: relative; }
ul li img { display: block; width: 100%; height: 100%; position: relative; z-index: 1 }
ul li span { width: 100%; height: 30px; position: absolute; z-index: 10; bottom: 0; left: 0; background: rgba(0,0,0,0.5); color: #fff; padding-top: 10px; }

网格布局中每个块的背景图像 - 没有html中的CSS

2 个答案: