如何让linear-gradient生成的十字置于span前景（仅修改td样式）

现有HTML/CSS代码实现的效果中，第二个单元格的<span>添加background-color后，单元格背景用linear-gradient生成的十字被<span>的背景和文本遮挡。因特殊场景限制只能使用内联样式，无法借助伪元素，调整z-index也未解决问题。需求为让十字显示在前景，优先仅修改<td>样式，且单元格与<span>可设置任意背景色。

对应的代码如下：

<table>
  <tbody>
    <tr>
      <td style='width: 56.7pt; border: 1px solid red;
                        background-image: linear-gradient(to right bottom, transparent 0%, transparent 49.9%, black 50%, black 52%, transparent 52.1%, transparent 100%), 
                            linear-gradient(to right top, transparent 0%, transparent 49.9%, blue 50%, blue 51%, transparent 51.1%, transparent 100%);
                        background-color: green;
                        background-size: 100% 100%;
                         background-clip: padding-box;'>
        <p>
          <span style=' color: #000000;'>Content</span>
        </p>
      </td>
      <td style='width: 56.7pt;  border: 1px solid red;
                        background-image: linear-gradient(to right bottom, transparent 0%, transparent 49.9%, black 50%, black 52%, transparent 52.1%, transparent 100%), 
                            linear-gradient(to right top, transparent 0%, transparent 49.9%, blue 50%, blue 51%, transparent 51.1%, transparent 100%);
                        background-color: green;
                        background-size: 100% 100%;
                         background-clip: padding-box;'>
        <p>
          <span style='background: #FF00FF; color: #000000;'>Content</span>
        </p>
      </td>
      <td style='width: 56.7pt;  border: 1px solid red;
                        background-image: linear-gradient(to right bottom, transparent 0%, transparent 49.9%, black 50%, black 52%, transparent 52.1%, transparent 100%), 
                            linear-gradient(to right top, transparent 0%, transparent 49.9%, blue 50%, blue 51%, transparent 51.1%, transparent 100%);
                        background-color: grey;
                        background-size: 100% 100%;
                         background-clip: padding-box;'>
        <p>
          <span style='background: #FF00FF; color: #000000;'>Content</span>
        </p>
      </td>
    </tr>
  </tbody>
</table>

可以通过调整多层背景的叠加顺序、background-origin和background-clip属性，让十字渐变覆盖在内部元素之上，且仅修改<td>样式即可实现。

修改后的<td>内联样式示例（以第二个单元格为例） #

<td style='width: 56.7pt; border: 1px solid red;
          padding: 0; /* 保持原有内边距，按需调整 */
          background-image: 
            linear-gradient(green, green), /* 将原background-color转为渐变作为底层 */
            linear-gradient(to right bottom, transparent 0%, transparent 49.9%, black 50%, black 52%, transparent 52.1%, transparent 100%), 
            linear-gradient(to right top, transparent 0%, transparent 49.9%, blue 50%, blue 51%, transparent 51.1%, transparent 100%);
          background-size: 100% 100%, 100% 100%, 100% 100%;
          background-origin: padding-box, content-box, content-box;
          background-clip: padding-box, content-box, content-box;'>

核心原理 #

• 多层背景遵循先写的在底层，后写的在顶层的叠加规则，将十字渐变放在顶层位置
• background-origin: content-box让十字渐变以单元格的内容区域为基准绘制，直接覆盖在内部元素上方
• 原单元格背景色转为渐变后，用padding-box的background-clip限制其绘制范围，避免覆盖十字渐变
• 单元格和<span>的背景色可任意修改，只需对应调整渐变颜色值即可

内容的提问来源于stack exchange，提问作者user19618751