css - HTML/CSS 两种背景颜色和表格 td 中的居中文本

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

演示

半白演示