Линейный градиент длины цвета в HTML не работает - PullRequest
Новая
       23

Линейный градиент длины цвета в HTML не работает

0 голосов
/ 28 марта 2019

Я пытаюсь создать градиентный фон в HTML с помощью CSS. Градиент должен иметь красный цвет 10% сверху, а остальная часть (80%) должна быть зеленого цвета, примерно так:
enter image description here

Для этого я написал такой код: 

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            html, body{margin: 0; padding:0;}
        </style>
    </head>
    <body>
        <div style="position: fixed; z-index: 1; background: linear-gradient(red 10%, green); height: 100%; width:100%"></div>
    </body>
    <script>
    </script>
</html>

Но я получаю этот вывод:
enter image description here

Пожалуйста, расскажите, что не так с моим кодом и как достичь моей цели.

1 Ответ

4 голосов
/ 28 марта 2019

Вы определяете цвет в определенных точках. Так что в вашем случае ... 

 background: linear-gradient(red 10%, green);

Это означает, что div составляет red при 10%. Поскольку вы не указали иное, браузер предполагает, что вам нужен красный от 0 до 10%.

Вы также сказали, что хотите изменить цвет на green, но не определили точку, где это должно произойти, поэтому браузер предполагает конец div (или 100%).

Чтобы получить эффект, который вы ищете, вам нужно что-то вроде этого: 

background: linear-gradient(red, green 20%);

Это начинается с red (при 0%), затем постепенно уменьшается до green к тому моменту, когда оно достигает отметки 20%, а затем продолжается green с этого момента (до 100%).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...