Question

情况：

宽度设置为100%的表格，其内部的单元格宽度为1000px。表格是居中的，单元格也是如此。

我想要一个从左到右，从右到左的渐变，它将在居中单元格的开头结束，颜色与单元格相同。

问题是，要占用整个页面，无论浏览器的大小是多少，表都设置为100%，单元格设置为1000px，因此它永远不会改变其大小，

如果可能的话，我如何实现我想要的，确保在较小的分辨率/监视器或窗口大小调整时，渐变将停止在该单元格的开头，因为渐变设置为百分比？

Answer 1

这是你想要的吗？

<table cellspacing="0" cellpadding="0">
  <tr>
    <td class="left">&nbsp;</td>
    <td class="center">Your content goes here</td>
    <td class="right">&nbsp;</td>
  </tr>
</table>

风格如此

table {
  /* the table takes up all the space */
  width: 100%;
}
td.center {
  /* there is one container column */
  width: 1000px;
  text-align: center;
  color: white;
  background-color: black; /* some fixed background color */
}
/* and two columns on the side which fade to some other color, in the respective directions */
td.left {
  background: -webkit-gradient(linear, left, right, from(white), to(black));
  background: -webkit-linear-gradient(left, white, black);
  background:    -moz-linear-gradient(left, white, black);
  background:     -ms-linear-gradient(left, white, black);
  background:      -o-linear-gradient(left, white, black);
  background:         linear-gradient(left, white, black);
}
td.right {
  background: -webkit-gradient(linear, right, left, from(white), to(black));
  background: -webkit-linear-gradient(right, white, black);
  background:    -moz-linear-gradient(right, white, black);
  background:     -ms-linear-gradient(right, white, black);
  background:      -o-linear-gradient(right, white, black);
  background:         linear-gradient(right, white, black);
}

您可以在此处尝试此示例：http://jsfiddle.net/qvum4/1/

<强>更新

但是，如果您没有特定的理由使用表，并且您只想实现此效果，则不应使用表。有几个jQuery渐变插件，您可以尝试使用。

你可以开发一个自定义的jQuery解决方案，以便在标记之外保留所有样式的乱码。请在此处尝试此示例：http://jsfiddle.net/YnUpY/1/

用css重新调整渐变和窗口大小

1 个答案: