Установка линейного градиента с помощью JavaScript - PullRequest
Новая
       7

Установка линейного градиента с помощью JavaScript

0 голосов
/ 10 февраля 2019

Я пытаюсь изменить фон моего сайта на линейный градиент разных цветов с помощью 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 + '))';
}

Ответы [ 2 ]

0 голосов
/ 10 февраля 2019

Спасибо, мой плохой.Принуждение цвета к черному показывает, что градиент работает, хотя, похоже, смещения цвета может быть недостаточно.Поскольку вы корректируете на 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>
0 голосов
/ 10 февраля 2019

Я немного изменяю твой код, может быть, то, что тебе нужно: 

 &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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...