css - 使用 css 调整渐变和窗口大小

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/