使用JavaScript设置线性渐变

Question

使用JavaScript设置线性渐变

3

我正在尝试使用JavaScript将我的网站背景更改为不同颜色的线性渐变。背景正在更改，但变成了纯色，而不是线性渐变。

我记录了背景，并显示出新的线性渐变，因此我“知道”它正在设置样式。

body {
    padding: 0;
    margin: 0;
    font-family: 'Kosugi Maru', sans-serif;
    background-image: linear-gradient(45deg, rgb(140, 202, 165), 
    rgb(198,159,197), rgb(248, 160, 133), rgb(52,219,216));
}

function generateGradient(one, two, three) {
    let lessOne = one;
    let moreOne = one;
    let lessTwo = two;
    let moreTwo = two;
    let lessThree = three;
    let moreThree = three;

    if (one >= 10) {
        lessOne = one - 10;
    }
    if (two >= 10) {
        lessTwo = two - 10;
    }
    if (three >= 10) {
        lessThree = three - 10;
    }

    if (one <= 245) {
        moreOne = one + 10;
    }
    if (two <= 245) {
        moreTwo = two + 10;
    }
    if (three <= 245) {
        moreThree = three + 10;
    }

    document.getElementsByTagName("body")[0].style.backgroundImage = 'linear-gradient(45deg, rgb(' + lessOne + ',' + lessTwo + ',' + lessThree + '), rgb(' + one + ',' + two + ',' + three + '), rgb(' + moreOne + ',' + moreTwo + ',' + moreThree + '))';
}

- spencer

你是如何调用这个函数的，又打印了什么内容？ - Ry-

@Ry- 生成渐变（colourOne，colourTwo，colourThree）; 并且console.log（document.getElementsByTagName（“body”）[0] .style.backgroundImage）和linear-gradient（45deg，rgb（56,76,162），rgb（66,86,172），rgb（76,96,182）） - spencer

嗯...你能否在Stack Snippet、JSFiddle或其他在线链接形式中重现它？ - Ry-

2个回答

0

谢谢，我的错。将颜色强制为黑色显示渐变正在工作，看起来颜色偏移可能不够。因为您每次在R、G和B上调整10，所以这并不重要。

function generateGradient(one, two, three) {
    let lessOne = one;
    let moreOne = one;
    let lessTwo = two;
    let moreTwo = two;
    let lessThree = three;
    let moreThree = three;

    if (one >= 10) {
        lessOne = one - 10;
    }
    if (two >= 10) {
        lessTwo = two - 10;
    }
    if (three >= 10) {
        lessThree = three - 10;
    }

    if (one <= 245) {
        moreOne = one + 10;
        moreOne = 0;
    }
    if (two <= 245) {
        moreTwo = two + 10;
        moreTwo = 0;
    }
    if (three <= 245) {
        moreThree = three + 10;
        moreThree = 0;
    }
    
    let style = `linear-gradient(45deg, rgb(${lessOne}, ${lessTwo} , ${lessThree} ) , rgb(${one}, ${two}, ${three}) , rgb(${moreOne}, ${moreTwo}, ${moreThree}))`;
    console.log(style);

    document.getElementsByTagName("body")[0].style.backgroundImage = style;
}

generateGradient(5, 210, 50);

body {
    padding: 0;
    margin: 0;
    font-family: 'Kosugi Maru', sans-serif;
    background-image: linear-gradient(45deg, rgb(140, 202, 165), 
    rgb(198,159,197), rgb(248, 160, 133), rgb(52,219,216));
}

<body>
  <div>TEST</div>
</body>

- Bibberty

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vadim Hulevich · Accepted Answer

我稍微修改了你的代码，也许这就是你需要的：

我对你的代码进行了一些小改动，也许这正是你所需要的：

 &nbsp;
    <style>
    body {
        padding: 0;
        margin: 0;
        font-family: 'Kosugi Maru', sans-serif;
        background-image: linear-gradient(45deg, rgb(140, 202, 165),
            rgb(198, 159, 197), rgb(248, 160, 133), rgb(52, 219, 216));
    }
    </style>
    <script>
    function generateGradient(one, two, three) {
        let lessOne = one;
        let moreOne = one + 120;
        let lessTwo = two;
        let moreTwo = two + 120;
        let lessThree = three;
        let moreThree = three + 120;

        if ((moreOne + 120) > 255) {
            moreOne = moreOne - 255;
        }
        if ((moreTwo + 120) > 255) {
            moreTwo = moreTwo - 255;
        }
        if ((moreThree + 120) > 255) {
            moreThree = moreThree - 255;
        }

        document.getElementsByTagName("body")[0].style.backgroundImage = 'linear-gradient(45deg, rgb(' + lessOne + ',' + lessTwo + ',' + lessThree + '), rgb(' + one + ',' + two + ',' + three + '), rgb(' + moreOne + ',' + moreTwo + ',' + moreThree + '))';
    }

    generateGradient(10, 100, 245)
    </script>