2012-02-08 59 views
0

我已经组成这个CSS3背景与WebKit的梯度:Webkit渐变固定程度?

background-image: -webkit-gradient(linear, right top, left bottom, 
    color-stop(0.01, #B601B3), 
    color-stop(2%, #9106D3), 
    color-stop(4%, #6B16EC), 
    /* [...](rainbow colors) */ 
    color-stop(96%, #2850FE), 
    color-stop(98%, #1175F7), 
    color-stop(1.0, #039BE5)); 

这工作正常(在Chrome和Safari浏览器,如预期),但它会调整每次页面“变长”的时间,这不是”不会有相同的程度,而且梯度往往会受到拖拉。

有没有什么办法让线性梯度在固定方向上“走”?你可以在moz-linear-gradient做同样的事吗?

回答

1

我最后只是这样的,支持所有现代浏览器(Safari浏览器,Chrome浏览器,Firefox和Opera):

background-image: -webkit-linear-gradient(45deg, #B601b3, 
     #B601B3 2%, #9106D3 4%, #6B16EC 6%, #472FFA 8%, #2850FE 10%, 
     #1175F7 12%, #039BE5 14%, #01BECA 16%, #0ADCA8 18%, #1DF283 20%, 
     #3AFD5D 22%, #5CFD3A 24%, #82F21E 26%, #A7DD0A 28%, #C9BF01 30%, 
     #E49C03 32%, #F77610 34%, #FE5127 36%, #FB3046 38%, #EC166A 40%, 
     #D40690 42%, #BF01B5 44%, #8F06D5 46%, #9106D3 48%, #6B16EC 50%, 
     #472FFA 52%, #2850FE 54%, #1175F7 56%, #039BE5 58%, #01BECA 60%, 
     #0ADCA8 62%, #1DF283 64%, #3AFD5D 66%, #5CFD3A 68%, #82F21E 70%, 
     #A7DD0A 72%, #C9BF01 74%, #E49C03 76%, #F77610 78%, #FE5127 80%, 
     #FB3046 82%, #EC166A 84%, #D40690 86%, #BF01B5 88%, #8F06D5 90%, 
     #9106D3 92%, #6B16EC 94%, #472FFA 96%, #2850FE 98%, #1175F7); 
background-image: -moz-linear-gradient(45deg, #B601b3, 
     #B601B3 2%, #9106D3 4%, #6B16EC 6%, #472FFA 8%, #2850FE 10%, 
     #1175F7 12%, #039BE5 14%, #01BECA 16%, #0ADCA8 18%, #1DF283 20%, 
     #3AFD5D 22%, #5CFD3A 24%, #82F21E 26%, #A7DD0A 28%, #C9BF01 30%, 
     #E49C03 32%, #F77610 34%, #FE5127 36%, #FB3046 38%, #EC166A 40%, 
     #D40690 42%, #BF01B5 44%, #8F06D5 46%, #9106D3 48%, #6B16EC 50%, 
     #472FFA 52%, #2850FE 54%, #1175F7 56%, #039BE5 58%, #01BECA 60%, 
     #0ADCA8 62%, #1DF283 64%, #3AFD5D 66%, #5CFD3A 68%, #82F21E 70%, 
     #A7DD0A 72%, #C9BF01 74%, #E49C03 76%, #F77610 78%, #FE5127 80%, 
     #FB3046 82%, #EC166A 84%, #D40690 86%, #BF01B5 88%, #8F06D5 90%, 
     #9106D3 92%, #6B16EC 94%, #472FFA 96%, #2850FE 98%, #1175F7); 
background-image: -o-linear-gradient(45deg, #B601b3, 
     #B601B3 2%, #9106D3 4%, #6B16EC 6%, #472FFA 8%, #2850FE 10%, 
     #1175F7 12%, #039BE5 14%, #01BECA 16%, #0ADCA8 18%, #1DF283 20%, 
     #3AFD5D 22%, #5CFD3A 24%, #82F21E 26%, #A7DD0A 28%, #C9BF01 30%, 
     #E49C03 32%, #F77610 34%, #FE5127 36%, #FB3046 38%, #EC166A 40%, 
     #D40690 42%, #BF01B5 44%, #8F06D5 46%, #9106D3 48%, #6B16EC 50%, 
     #472FFA 52%, #2850FE 54%, #1175F7 56%, #039BE5 58%, #01BECA 60%, 
     #0ADCA8 62%, #1DF283 64%, #3AFD5D 66%, #5CFD3A 68%, #82F21E 70%, 
     #A7DD0A 72%, #C9BF01 74%, #E49C03 76%, #F77610 78%, #FE5127 80%, 
     #FB3046 82%, #EC166A 84%, #D40690 86%, #BF01B5 88%, #8F06D5 90%, 
     #9106D3 92%, #6B16EC 94%, #472FFA 96%, #2850FE 98%, #1175F7); 

亲身体验:http://jsfiddle.net/z8w2N

这是一个完美的彩虹梯度未来的搜索者! :)

+0

彩虹小提琴:http://jsfiddle.net/z8w2N :) – 2014-03-10 18:34:54