如何使用CSS制作具有左半部分为红色背景和右半部分为绿色背景的HTML表格单元格(TD标记),而不使用背景图片。我不想要两个单元格,只需要一个由CSS定义的具有双色背景的TD单元格。
我已经使用了CSS渐变的概念。在这里,第一种颜色从0开始,并在50%结束,而第二种颜色从51%开始,并在100%结束。因此,可以为每种颜色分配比例。
td {
background: linear-gradient(to right, tomato 50%, lightgray 51%);
}
<table>
<tr>
<td>
Two Color Background
</td>
</tr>
</table>
Here you go:
td.halfnhalf {
position: relative;
background: green;
}
td.halfnhalf > span{
position:relative;
}
td.halfnhalf:before {
position: absolute;
content: '';
top: 0;
left: 0;
right: 50%;
bottom: 0;
background: red;
}
<table>
<tr>
<td class="halfnhalf"><span>Testing</span></td>
</tr>
</table>
如果您需要进一步的演示,请告诉我,我会设置一个jsfiddle。