CSS，我可以在一个表格单元格中使用两种不同的颜色吗？ （例如深紫色和浅紫色）

Question

有没有人知道如何在一个表格单元格中使用两种颜色（td）以及如何让它们互相溢出？

例如。对于我的网站（www.ericversteeg.nl），我想在我的留言簿标题栏中使用浅紫色在单元格的顶部，深紫色在底部。

我想我必须在td中分配一个类。

但是如何在CSS中创建我的课程？

问候埃里克

Answer 1

CSS 3 drafts引入渐变色。

e.g。

background: linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%);

请注意browser support is not universal。

Answer 2

有几种方法可以做到这一点。第一个是在顶部有一个div，在底部有一个div，每个都有不同的颜色。

<td class="multi_purple">
    <div class="top">
    </div>
    <div class="bottom">
    </div>
</td>

并使用各自的颜色设置两个div的样式。

“更好”的选择是使用正确颜色的背景图像。这将是跨浏览器支持的，但如果您的表增大或缩小，则不会很好。

最新选项是添加渐变。查看http://www.css3please.com以查看此语法。

但它是这样的

background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
  background-image: -webkit-linear-gradient(top, #444444, #999999);
  background-image:    -moz-linear-gradient(top, #444444, #999999);
  background-image:     -ms-linear-gradient(top, #444444, #999999);
  background-image:      -o-linear-gradient(top, #444444, #999999);
  background-image:         linear-gradient(to bottom, #444444, #999999);

当然你的紫色色调到位了。

对于不支持渐变的浏览器，这会降低为纯色（看着你，即6/7？）

Answer 3

我发现这个工具非常有用：CSS3 Gradient Generator。它产生的代码不是最美妙的，但它有效！

Answer 4

您可以使用建议的背景渐变，或使用同时包含两种颜色的背景图像。

如果你知道你的细胞会被称为30px高，那就制作一张30px高，1px宽的图像，将其分割到你想要的位置，并在其中包含两种颜色。然后使用css：

td {
  background-image: url(colors.png);
  background-repeat: repeat-x;
}

水平平铺，从而获得你想要的效果。

Answer 5

这是你要找的吗？

http://jsfiddle.net/4NXRx/2/

它使用背景渐变，您无需调用任何图像资源。您也不必担心更新图像。

对于不支持渐变的浏览器，有一种备用颜色。这对所有访客来说并不重要，所以如果一些访客看不到梯度，这没什么大不了的。

请注意，我已经停止了49％，因此没有逐渐改变。我不知道这是不是你想要的。显然，你必须选择更好的颜色。

table td {
padding: 10px;

background-color: #CEC3FA;
background-image: linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -o-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -moz-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -webkit-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -ms-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);

background-image: -webkit-gradient(
    linear,
    right 49%,
    right 50%,
    color-stop(0.08, #CEC3FA),
    color-stop(0.51, #B9AAD1)
);