僅將 css 背景應用於表格單元格的文本內容

Question

我有一個 HTML 表格。 對於特定行（具有突出顯示類），我想應用背景，這會使文本難以閱讀。 一個解決方案是，只在文本后面放置一個半透明的白色背景。 最簡單的解決方案是，將每個文本元素放在一個單獨的跨度中，但不幸的是，在這種特定情況下我無法修改 HTML 結構。

那么，有沒有一種方法可以將 CSS 規則僅應用於具有純 CSS 的表格單元格 ( td ) 中包含的文本？

Answer 1

您可以使用background-clip: content-box只為內容應用背景。

 td { padding: 10px; } .bg-normal { background-color: lime; } .bg-text { background-color: pink; /* apply background only for text*/ -webkit-background-clip: content-box; background-clip: content-box; }

 <table> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> </tr> </thead> <tbody> <tr> <td>Content 1</td> <td>Content 2</td> <td>Content 3</td> </tr> <tr class="bg-normal"> <td>Content 1</td> <td>Content 2</td> <td>Content 3</td> </tr> <tr class="bg-text"> <td>Content 1</td> <td>Content 2</td> <td>Content 3</td> </tr> </tbody> </table>