Question

我正在尝试使用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 + '))';
}

Answer 1

我很少更改您的代码，也许就是您所需要的：

 &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>

Answer 2

谢谢，我不好。将颜色强制为黑色表明虽然渐变有效，但看起来色移可能还不够。因为您在每个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>

使用JavaScript设置线性渐变

2 个答案: