Webkit-渐变固定度？

发布于 2025-01-04 06:01:34 字数 494 浏览 3 评论 0原文

我用 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 中做同样的事情吗？

原文

I have composed this CSS3-background with the WebKit-gradient:

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));

This works fine (in Chrome and Safari, as expected), but it resizes every time the page "gets longer", it doesn't go in the same degree and the gradient often gets dragged a lot.

Is there any way to make a linear-gradient "go" in a fixed direction? And can you do the same in moz-linear-gradient?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

以可爱出名 2025-01-11 06:01:34

我最终这样做了，支持所有现代浏览器（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

对于未来的搜索者来说，这是一个完美的彩虹渐变！ :)

I ended up doing it like this, supporting all modern browsers (Safari, Chrome, Firefox and 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);

See it live: http://jsfiddle.net/z8w2N

This is a perfect rainbow-gradient for future searchers! :)

回复收藏 0 原文

~没有更多了~