1

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

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

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

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

问候埃里克

4

5 回答 5

2

CSS 3 草案引入了渐变色。

例如

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

请注意，浏览器支持不是通用的。

于 2012-05-01T13:48:50.833 回答
0

这是你要找的吗？

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)
);
于 2012-05-01T18:19:04.863 回答
0

有几种方法可以做到这一点。第一个是顶部有一个 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？）

于 2012-05-01T13:47:43.337 回答
0

我发现这个工具很有帮助：CSS3 Gradient Generator。它生成的代码不是最漂亮的，但它确实有效！

于 2012-05-01T13:48:10.390 回答
0

您可以使用建议的背景渐变，或使用具有两种颜色的背景图像。

如果您知道您的单元格将是 30px 高，则制作一个 30px 高 x 1px 宽的图像，在您想要的位置分割，并在其中包含两种颜色。然后使用css：

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

将其水平平铺，从而获得您想要的效果。

于 2012-05-01T13:49:14.460 回答