时间戳

首页 > 解决方案 > 仅将 css 背景应用于表格单元格的文本内容

html - 仅将 css 背景应用于表格单元格的文本内容

问题描述

我有一个 HTML 表格。对于特定行（具有突出显示类），我想应用背景，这会使文本难以阅读。一个解决方案是，仅在文本后面放置一个半透明的白色背景。最简单的解决方案是将每个文本元素放在一个单独的跨度中，但不幸的是，在这种特定情况下我无法修改 HTML 结构。

那么，有没有办法仅将 CSS 规则应用于td带有纯 CSS 的表格单元格 ( ) 中包含的文本？

标签： htmlcsscss-selectors

解决方案

您可以使用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>

推荐阅读