Thead 背景圖像疊加

Question

我有一個 html 文檔和 CSS 並嘗試以下操作：我想在<Thead>中有一個背景圖像。 此圖像應位於其他 td 的背景中。 也許是疊加？

我想獲得以下解決方案（注意：圖像必須在 thead 中。另一個 Td 必須沒有背景圖像）

我為什么需要它？ 我們正在使用在線內置軟件，將 html 輸出轉換為 pdf。而 thead 是唯一在每個頁面上重復的標記。 重復 header 的其他解決方案不起作用。

TBody 上的背景圖像對我不起作用，因為它不會在 pagebrake 出現時重復。

編輯：更新代碼並澄清我的問題

所以這是我開始的一個簡單代碼（感謝@NickVU）

 <style type="text/css"> table, th, td { border: 1px solid black; border-collapse: collapse; width: 500px; height: 200px; color: yellow } thead { background-image: url("https://www.w3schools.com/css/img_5terre.jpg"); } </style> <table> <thead> <tr> <th>Month</th> </tr> </thead> <tbody> <tr> <td>January</td> </tr> <tr> <td>February</td> </tr> </tbody> </table>

所以最后，我想獲得以下 output。（如上圖）

 <style type="text/css"> table, th, td { border: 1px solid black; border-collapse: collapse; width: 500px; height: 200px; color: yellow } table { background-image: url("https://www.w3schools.com/css/img_5terre.jpg"); background-repeat: no-repeat; } </style> <table> <thead> <tr> <th>Month</th> </tr> </thead> <tbody> <tr> <td>January</td> </tr> <tr> <td>February</td> </tr> </tbody> </table>

注意：但是img必須鏈接在thead

Answer 1

更新

根據您的要求更新，現在我簡要了解了您的情況。

background-image ，但是我們可以在thead上使用偽元素::before來做到這一點。 這是一個例子

 table, th, td { border: 1px solid black; border-collapse: collapse; width: 500px; height: 200px; color: white; position: relative; } thead::before { content: ''; position: absolute; top: 0; width: 100%; height: 100%; background-image: url("https://www.w3schools.com/css/img_5terre.jpg"); background-repeat: no-repeat; }

 <table> <thead> <tr> <th>Month</th> </tr> </thead> <tbody> <tr> <td>January</td> </tr> <tr> <td>February</td> </tr> </tbody> </table>

舊答案

我想你只是把它放在你的 CSS

 table, th, td { border: 1px solid black; border-collapse: collapse; } thead, tbody { background-image: url("https://www.w3schools.com/cssref/paper.gif"); }

 <table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table>

P/s：我在演示中使用的是W3 學校圖片。 您可以將其替換為您自己的圖像。