Question

我们需要设置表格的背景图片。一种方法是设置表标记的背景属性，但这需要在打印时在浏览器中启用printbackground选项。我们可以设置图像和表格的z-index吗？

Answer 1

您可以放置一个DIV并将图像放在那里，然后将表格准确地放在它上面。瞧。

Answer 2

这实际上是一个CSS命令。 z-index仅在绝对定位对象时生效。它用于手动设置元素在彼此之上显示的顺序。如果HTML元素显示在另一个之后，默认情况下它将显示在另一个之上，您可以使用z-index覆盖此默认值。

<img src="some image"/>
<div>some text</div>

<style type="text/css">
img, div {
    position: absolute;
}
</style>

在上面的html中，div将显示在顶部，z-index可用于更改此内容。

您要实现的目标是显示表格的背景图像，包括何时正在打印 - 我是否正确？您的问题是，默认情况下，大多数浏览器不会打印背景图像（以节省墨水并使事情更容易阅读）。如果您愿意，您通常可以选择在浏览器设置中打印背景图像，因此您可能不需要在您的网站上强制执行此操作，而只是注意用户在其打印设置中打开背景图像？ / p>

但如果您确实想强制用户打印背景图片，那么您的代码可能如下所示：

<img class="table-bg-image" src="http://www.google.com.au/intl/en_com/images/srpr/logo1w.png"/>
<table class="with-bg-image">
    <tr><td>Table contents here</td></tr>
</table>

<style type="text/css">
    img.table-bg-image {
        position: absolute;
        z-index: -1;
    }
    table.with-bg-image, table.with-bg-image tr, table.with-bg-image td {
        background: transparent;
    }
</style>

请记住将图像大小与表格大小进行比较。

绝对定位图像会使它在桌子下面“浮动”，因为当你没有设置'top'和'bottom'属性时，绝对定位不会改变元素的位置（这只意味着它没有'占用任何房间）。元素绝对定位的事实导致它默认显示在表格上方，因此我们使用负z-index使其显示在后面。

表背景图像

2 个答案: