情况:
宽度设置为100%
的表格,其内部的单元格宽度为1000px
。表格是居中的,单元格也是如此。
我想要一个从左到右,从右到左的渐变,它将在居中单元格的开头结束,颜色与单元格相同。
问题是,要占用整个页面,无论浏览器的大小是多少,表都设置为100%
,单元格设置为1000px
,因此它永远不会改变其大小,
如果可能的话,我如何实现我想要的,确保在较小的分辨率/监视器或窗口大小调整时,渐变将停止在该单元格的开头,因为渐变设置为百分比?
答案 0 :(得分:0)
这是你想要的吗?
<table cellspacing="0" cellpadding="0">
<tr>
<td class="left"> </td>
<td class="center">Your content goes here</td>
<td class="right"> </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/