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

【问题标题】：How to show table image in cells but not in cellspacing?如何在单元格中显示表格图像但不在单元格间距中？
【发布时间】：2017-12-15 07:02:40
【问题描述】：

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

有没有办法建立遮罩，使单元格显示表格的图像（好吧，它们的一部分），但单元格间距显示页面的图像？

编辑：示例图片：

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

【问题讨论】：

【解决方案1】：

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

我认为使用 DIV 会更容易。

【讨论】：

【解决方案2】：

不，不是你想的那样。我不会将图像作为单元格的背景图像。相反，在单元格中放置一个div，将其调整为适当的掩码大小，然后通过 CSS background-image 将背景图像应用于该单元格。 div 获取图像并且单元格间距（出现在 div 之外）保持不变。

【讨论】：

【解决方案3】：

你不能把这个类应用到你的桌子上，让它应用到后代 td 上吗？

table.myborderclass {
    //transparent
}

table.myborderclass td {
    background: yada
}

【讨论】：