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

我有一张桌子，其中带有文字的<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/

最佳答案

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

关于css - HTML/CSS两种背景色和表格td中居中的文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17831431/