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

Question

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

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

Answer 1

您可以使用const utils = require('./utils'); // call without use 'utils.[...]' foo(5); bar('string'); 仅将背景应用于内容。

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;
}