使用 CSS 在表格上添加水印

Question

我必须在一系列动态生成的 a5 大小的收据上分别添加一个水印。使用 Rotativa 和 asp.net mvc5。不幸的是，这些收据是用表格生成的，不知道该怎么做，

<style>
.watermark {
    height: 95%;
    width: 85%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    z-index: 9999;
    opacity: 0.2;
    }
</style>

<div class="watermark" style="background: url('/content/Images/image.png') no-repeat; opacity : 0.4;"></div>
<table>
</table>

<div class="watermark" style="background: url('/content/Images/image.png') no-repeat; opacity : 0.4;"></div>
<table>
</table>

<div class="watermark" style="background: url('/content/Images/image.png') no-repeat; opacity : 0.4;"></div>
<table>
</table>

…… 仅生成一个图像，该图像位于第一张收据的左上角。 我需要这方面的帮助。

Answer 1

<style>
table tr td:first-child { background: url("https://www.gravatar.com/avatar/21e3102a092c9848a19de0fd6f07b6ab?s=48&d=identicon&r=PG&f=1");}
</style>
<table class="example-table">
  <tr><td>First column</td><td>Second column</td><td>Third column</td></tr>
  <tr><td>First column</td><td>Second column</td><td>Third column</td></tr>
  <tr><td>First column</td><td>Second column</td><td>Third column</td></tr>
</table>