我用WebKit渐变构成了CSS3背景:
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
中做同样的事情吗? 最佳答案
我最终这样做,支持所有现代浏览器(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
对于未来的搜索者来说,这是一个完美的彩虹渐变! :)
关于css - Webkit渐变固定度?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/9197764/