表格上的 HTML/CSS 渐变背景

Question

我用渐变背景制作了这个简单的导航栏。

如您所见，它具有渐变背景。没什么特别的，只是用了一个被 table 遮住的 photoshop 渐变。我制作 photoshop 版本只是为了展示我的设计，现在我无法在线重新创建它。如何使 HTML 表格的背景具有这种渐变？

我阅读了一些类似问题的答案，但它们的答案比我想要的要复杂得多。我不需要平铺它，我只想将我的 table 背景设置为这个渐变。 (现场生成的渐变或重复图像，无偏好)

Answer 1

我使用的是随机渐变，因为我看不到您想要的渐变，但这是一个快速的 CSS3 示例。

HTML

<table>
    <tr>
        <td>Table Data</td>
    </tr>
</table>

CSS

table{
    /* set your gradient code here */
    background: rgb(240,183,161);
    background: -moz-linear-gradient(-45deg,  rgba(240,183,161,1) 0%, rgba(140,51,16,1) 50%, rgba(117,34,1,1) 51%, rgba(191,110,78,1) 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(240,183,161,1)), color-stop(50%,rgba(140,51,16,1)), color-stop(51%,rgba(117,34,1,1)), color-stop(100%,rgba(191,110,78,1)));
    background: -webkit-linear-gradient(-45deg,  rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%);
    background: -o-linear-gradient(-45deg,  rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%);
    background: -ms-linear-gradient(-45deg,  rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%);
    background: linear-gradient(135deg,  rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=1 );

}

梯度生成:http://www.colorzilla.com/gradient-editor/

工作 fiddle :http://jsfiddle.net/daCrosby/43ZkH/