Question

我有一张桌子，其中一个带文字的<td>应该是双色的。经过一些研究，我找到了一个包含4个<div>元素的方法，但它看起来与其他字段不完全相同。

<iframe width="100%" height="300" src="http://jsfiddle.net/tG5n3/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

<div> - 方法：

<td style="width: 90px;">
    <div style="position: relative; height: 24px;">
         <div style="position: relative; z-index: 1; top: 20%;">Action 3.1</div>
         <div style="position: absolute; top: 0; bottom: 0; left: 0; background: lightgreen; width: 50%;"></div>
         <div style="position: absolute; top: 0; bottom: 0; right: 0; background: white; width: 50%;"></div>
    </div>
</td>

那么有没有办法更好或更好地处理这个问题？

以下是完整的代码示例：http://jsfiddle.net/tG5n3/

Answer 1

您可以使用 gradient 属性执行此操作：

td.two-color {
    background-image: -webkit-linear-gradient(left, #1EBFE1 0%, #1EBFE1 50%, #34D12C 50%, #34D12C 100%);
    background-image:    -moz-linear-gradient(left, #1EBFE1 0%, #1EBFE1 50%, #34D12C 50%, #34D12C 100%);
    background-image:     -ms-linear-gradient(left, #1EBFE1 0%, #1EBFE1 50%, #34D12C 50%, #34D12C 100%);
    background-image:      -o-linear-gradient(left, #1EBFE1 0%, #1EBFE1 50%, #34D12C 50%, #34D12C 100%);
    background-image:         linear-gradient(left, #1EBFE1 0%, #1EBFE1 50%, #34D12C 50%, #34D12C 100%);
}

DEMO

Demo with half white

HTML / CSS两种背景颜色和表td中的中心文本

1 个答案:

DEMO