我想我的网站的背景更改为不同颜色的使用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 + '))';
}
我有点改变你的代码，也许你需要的东西：
<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>谢谢你，我的坏。颜色的强迫黑色显示的梯度工作虽然看起来颜色变化可能是不够的。因为你被10上的每个R，G和B调节，它确实是不显著。
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>