html - 将颜色渐变构建到html中

Question

这是我网站上的第一行(横幅):

#toprow {position: static;top:0px}

我找到了以下代码，我相信它可以让我将颜色从深蓝色分级为浅蓝色。尽管尝试了很多次，但我还没有找到将其构建到我的横幅中的方法:

#grad
{
background: -webkit-linear-gradient(rgb(0,102,255), rgb(153,204,255)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgb(0,102,255), rgb(153,204,255)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgb(0,102,255), rgb(153,204,255)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgb(0,102,255), rgb(153,204,255)); /* Standard syntax (must be last) */
}    

Answer 1

使用 this tool ，你可以轻松实现你想要的。这也将为您提供跨浏览器解决方案。请参阅下面的 colorzilla 给您的颜色渐变:

background: #0066ff; /* Old browsers */
background: -moz-linear-gradient(top,  #0066ff 0%, #99ccff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0066ff), color-    stop(100%,#99ccff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #0066ff 0%,#99ccff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #0066ff 0%,#99ccff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #0066ff 0%,#99ccff 100%); /* IE10+ */
background: linear-gradient(to bottom,  #0066ff 0%,#99ccff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0066ff', endColorstr='#99ccff',GradientType=0 ); /* IE6-9 */

现在，如果您将此代码放在 #grad 中，它假设您有一个包含 id="grad" 的 HTML 元素。