2

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

如您所见，它具有渐变背景。这没什么花哨的，只是用了一个被桌子遮住的 Photoshop 渐变。我制作了 Photoshop 版本只是为了展示我的设计，现在我无法在网上重新创建它。如何使 HTML 表格具有此渐变作为背景？

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

4

2 回答 2

6

我正在使用随机渐变，因为我看不到您想要的渐变，但这里有一个快速的 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/

工作小提琴：http: //jsfiddle.net/daCrosby/43ZkH/

于 2013-05-31T01:14:51.163 回答
1

您可以使用 DIV 作为具有渐变和填充的表的父级：0；

<div style="background: url('gradient.jpg') repeat-x left top">
<table>
<!-- table content here -->
</table>
</div>

** 支持所有浏览器

于 2013-05-31T01:14:41.047 回答