css - 如何使用 CSS 将 div 背景分成“n”个色带

Question

我有一张大桌子，需要将单元格的背景更改为 1 到 6 个色带，例如堆叠在一起的矩形（其他信息将出现在单元格内）。虽然这个例子是一个表格，但我猜这适用于任何 DIV。我希望能够（通过 javascript 即时）抓取 DOM 中的“cellcontainer”DIV 并创建子 DIV 以创建带状背景效果。

<table border=1 width=400 height=400>
    <tr>
        <td>
            <div class="cellcontainer">
                One
            </div>
        </td>
        <td>Two</td>
    </tr>
    <tr>
        <td>Three</td>
        <td>Four</td>
    </tr>
</table>

对于这个简单的表格，我尝试使用第一个单元格（使用 div 'cellcontainer'）并将背景设置为三种不同的颜色，如浅蓝色、黄色和绿色。我尝试添加高度=33% 的子 div，并将 cellcontainer 的样式设置为相对，将子 div 设置为绝对等，但我还没有找到神奇的组合。

Answer 1

当您说要使单元格的背景具有3种不同的颜色时，您的意思是渐变吗？如果是这样试试这个

否则我不太清楚你所说的“让背景变成3种不同的颜色”是什么意思。