html - 如何在单元格中显示表格图像但不在单元格间距中？

Question

考虑一个带有背景图像 pageBG.jpg 的网页。现在考虑一个具有 100px x 100px 单元格和相对较大的 50px 单元格间距的表格。该表具有不同的背景图像，例如 tableBG.jpg。

有什么方法可以建立遮罩，以便单元格显示表格的图像（好吧，它们的一部分），但单元格间距显示页面的图像？

编辑：示例图片：

绿色是 pageBG.jpb，黑色/棕褐色图像是 tableBG.jpg

Answer 1

你可以使用 CSS sprite 来完成这项工作，它只需要大量的 CSS。您将有一个页面背景图像，然后是您计划用于表格背景的单个图像，但这将用于每个单独的单元格。每个单元格都需要 CSS 来确定单元格中图像的 x/y 位置。您只需要计算单元格的大小 + 间距即可知道在单元格中放置图像的位置。

我认为使用 DIV 会更容易做到这一点。

Answer 2

No, not the way you are thinking about it. I would not put the image as the cell's background image. Instead, put a div in the cell, size that to the proper masking size and apply the background image to that via CSS background-image. That div gets the image and the cellspacing (which appears outside the div) remains intact.

Answer 3

cant you apply the class onto your table and have it apply to descendent td's?

table.myborderclass {
    //transparent
}

table.myborderclass td {
    background: yada
}