桌上的HTML/CSS渐变背景

我用渐变背景制作了这个简单的导航栏。桌上的HTML/CSS渐变背景

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

我读了一些类似问题的答案，但他们有比我想找的更复杂的答案。我不需要平铺它，我只是想将我的表格的背景设置为此渐变。（当场产生的梯度或重复的图像，没有偏好）

来源

2013-05-30 brothman

凡你的问题的形象？（它也不是在原来的问题上发布） – Nightfirecat

需要100个重新发布图像，Sry :( – brothman

我使用的是随机梯度，因为我看不到你想要的一个，但这里有一个快速的CSS3例子。 http://www.colorzilla.com/gradient-editor/

工作小提琴：

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://jsfiddle.net/daCrosby/43ZkH/

来源

2013-05-31 01:14:51 DACrosby

thx为答案。它开始时把我扔掉了，因为某些原因渐变背景没有出现在我的DreamWeaver CS6 ..但是当我在Safari中预览页面时，它显示。无论如何，thx再次！ – brothman

你可以使用一个DIV作为具有渐变和填充的表格的父代：0;

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

**支持所有浏览器

来源

2013-05-31 01:14:41

桌上的HTML/CSS渐变背景

回答

相关问题