如何用不同的颜色填充一个div答案

【问题标题】：How to fill a div with different colors如何用不同的颜色填充一个div
【发布时间】：2025-12-13 21:30:01
【问题描述】：

我需要为给定的图像为单个表格单元格添加不同的颜色。如何在不将单元格分隔为不同 div 的情况下做到这一点。

【问题讨论】：

【解决方案1】：

您可以像这样使用 css 线性渐变（这是一个带有红色和蓝色两种颜色的示例）：

#test{
 background: linear-gradient(red 100px, blue 100px);
 background: -webkit-linear-gradient(red 100px, blue 100px);
 background: -o-linear-gradient(red 100px, blue 100px);
 background: -moz-linear-gradient(red 100px, blue 100px);
}

这是小提琴http://jsfiddle.net/eMmE9/

【讨论】：

【解决方案2】：

使用 CSS3 linear gradient 您可以添加多种背景颜色。这是一个快速DEMO。

所有最新的浏览器都支持它。要在旧版浏览器上工作，请同时添加供应商前缀。这是我使用的 CSS。

div{
width:200px;
height:150px;
background:linear-gradient(to bottom, #808000 0%, #808000 20%, #400080 20%, #400080 40%, #FF0080 40%, #FF0080 60%, #FFFF00 60%, #FFFF00 80%, #800040 80%, #800040 100%); /*standard as per W3C*/
}

在这里查看结果。

【讨论】：

【解决方案3】：

这可能对你有帮助

<td bgcolor="#FF0000"></td>
<td bgcolor="#00FF00"></td>
<td bgcolor="#0000FF"></td>

【讨论】：

【解决方案4】：

HTML

 <table id="test">
   <tr>
    <td>
    <div class="block1">
        </div>
          <div class="block1 blue">
        </div>
          <div class="block1 green">
        </div>
          <div class="block1 yellow">
        </div>
    </td>
  </tr>
 </table>

CSS

#test{
height:200px;
width:200px;
     }
.block1
 {
width:200px;
height:50px;
background:red;
 }
 .blue
{
   background:blue;       
 }
.green
{
 background:green;     
}
.yellow
{
background:yellow;     
 }

这就是解决方案。你也可以看看我的小提琴

http://jsfiddle.net/eMmE9/4/

【讨论】：

【解决方案5】：

css 线性渐变是满足您需求的绝佳选择。您可以通过从该 Site 中选择颜色和图案来生成 CSS，并支持所有浏览器。

【讨论】：