表格上的 HTML/CSS 渐变背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16848269/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS gradient background on a table
提问by fall3n
I made this simple navigation bar with a gradient background.
我用渐变背景制作了这个简单的导航栏。
as you can see, it has a gradient background. It is nothing fancy, just used a photoshop gradient masked by the table. I made the photoshop version just to show my design, and now I am having trouble recreating it online. How do I make an HTML table have this gradient as it's background?
如您所见，它具有渐变背景。没什么特别的，只是用了一张被桌子遮住的 Photoshop 渐变。我制作了 Photoshop 版本只是为了展示我的设计，现在我无法在线重新创建它。如何使 HTML 表格具有这种渐变作为背景？
I read some answers to similar questions, but they had more complex answers than I am looking for. I do not need to tile it, I just want to set the background of my table to this gradient. (gradient generated on the spot or a repeated image, no preference)
我阅读了一些类似问题的答案，但它们的答案比我想要的更复杂。我不需要平铺它，我只想将我的桌子的背景设置为这个渐变。（当场生成的渐变或重复图像，无偏好）
回答by DACrosby
I'm using a random gradient because I can't see your desired one, but here's a quick CSS3 example.
我正在使用随机渐变，因为我看不到您想要的渐变，但这里有一个快速的 CSS3 示例。
HTML
HTML
<table>
<tr>
<td>Table Data</td>
</tr>
</table>
CSS
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 );
}
Gradient generated with: http://www.colorzilla.com/gradient-editor/
渐变生成：http: //www.colorzilla.com/gradient-editor/
Working Fiddle: http://jsfiddle.net/daCrosby/43ZkH/
回答by Nikola R.
You can use a DIV as a parent for table which will have gradient and padding: 0;
您可以使用 DIV 作为具有渐变和填充的表的父级：0;
<div style="background: url('gradient.jpg') repeat-x left top">
<table>
<!-- table content here -->
</table>
</div>
** Supported in all browsers
** 支持所有浏览器
