如何在不跨越它的情况下在 td 中有两种背景颜色？答案

【问题标题】：How to have two background color in a td without spanning it?如何在不跨越它的情况下在 td 中有两种背景颜色？
【发布时间】：2013-03-26 11:06:04
【问题描述】：

先生/女士您好，我想在 td 的顶部和底部有不同的背景，即前半部分应为绿色，后半部分为红色...

【问题讨论】：

你试过使用渐变吗？
看看这个：stackoverflow.com/questions/4836134/…
Mark Dee 先生我不会尝试
我检查了您的链接 Mr.Ophintor 但它用于更改背景或奇数行和偶数行
好吧，用一张图片然后codepen.io/anon/pen/dyfxo

标签： html

【解决方案1】：

使用 CSS 渐变。在您的情况下，CSS 将是：

background-image: linear-gradient(bottom, rgb(0,255,0) 50%, rgb(255,0,0) 50%);
background-image: -o-linear-gradient(bottom, rgb(0,255,0) 50%, rgb(255,0,0) 50%);
background-image: -moz-linear-gradient(bottom, rgb(0,255,0) 50%, rgb(255,0,0) 50%);
background-image: -webkit-linear-gradient(bottom, rgb(0,255,0) 50%, rgb(255,0,0) 50%);
background-image: -ms-linear-gradient(bottom, rgb(0,255,0) 50%, rgb(255,0,0) 50%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.5, rgb(0,255,0)),
    color-stop(0.5, rgb(255,0,0))
);

使用此站点生成更多：http://gradients.glrzad.com/

【讨论】：

【解决方案2】：

要直接执行此操作，您可以将具有此功能的图像设置为背景。类似的东西

style="background-image:url(twocolor.png);"

【讨论】：

【解决方案3】：

如果你不喜欢渐变（只是为了好玩）。 http://codepen.io/anon/pen/mqdvB

【讨论】：

谢谢你，Mark Dee 先生，现在我得到了我的输出

【解决方案4】：

尝试渐变：

td {
    background: #00ff00;
    background: -moz-linear-gradient(top,  #00ff00 0%, #00ff00 49%, #ff0000 50%, #ff0000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00ff00), color-stop(49%,#00ff00), color-stop(50%,#ff0000), color-stop(100%,#ff0000));
    background: -webkit-linear-gradient(top,  #00ff00 0%,#00ff00 49%,#ff0000 50%,#ff0000 100%);
    background: -o-linear-gradient(top,  #00ff00 0%,#00ff00 49%,#ff0000 50%,#ff0000 100%);
    background: -ms-linear-gradient(top,  #00ff00 0%,#00ff00 49%,#ff0000 50%,#ff0000 100%);
    background: linear-gradient(to bottom,  #00ff00 0%,#00ff00 49%,#ff0000 50%,#ff0000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#ff0000',GradientType=0 );
}

要编辑此渐变，请使用this。

【讨论】：