将颜色渐变构建为html

时间:2014-06-02 18:45:47

标签: html css

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

#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) */
}    

1 个答案:

答案 0 :(得分:0)

使用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元素。