Я пытаюсь применить линейный градиент к своему телу, но это не работает. Теперь, когда я использую радиальный градиент, это работает. Это почему? - PullRequest
Новая
       79

Я пытаюсь применить линейный градиент к своему телу, но это не работает. Теперь, когда я использую радиальный градиент, это работает. Это почему?

1 голос
/ 22 января 2020

Я работаю с Sass, и я решил оставить цвета внутри переменной (). Итак, я использую: root в качестве декларации области. Я уже добавил минимальную высоту к своему телу и к своему html, основываясь на информации, найденной на developer.mozilla: https://developer.mozilla.org/es/docs/Web/CSS/linear-gradient

"Примечания Если вы установите background-image Если для свойства тега задан линейный градиент, градиент не заполнит экран браузера, если вы не установите для свойства min-height документа root (например, тег) значение 100%. "

Я пробовал некоторые вещи, такие как добавление маржи к своему телу, но ничего не получалось. Я посетил некоторые форумы, но не смог решить свою проблему.

Переменные работают правильно, потому что когда я пытаюсь background-image: radial-gradient(circle at center, var(--color-primary-light), var(--color-primary-dark)); все работает нормально. Я хотел бы знать, почему фоновое изображение не применяется, если я использую линейный градиент, но работает, когда я использую радиальный градиент? 

 /* COLORS */

:root{
    --color-primary: #eb2f64;
    --color-primary-light: #FF3366;
    --color-primary-dark: #BA265D;

    --color-grey-light-1: #faf9f9;
    --color-grey-light-2: #f4f2f2;
    --color-grey-light-3: #f0eeee;
    --color-grey-light-4: #ccc;

    --color-grey-dark-1: #333;
    --color-grey-dark-2: #777;
    --color-grey-dark-3: #999;
}

/* ============================================================== */

*{
    margin: 0;
    padding: 0;
}

*,
*::after,
*::before{
    box-sizing: inherit;
}

html{
    box-sizing: border-box;
    font-size: 62.5%;
    min-height: 100vh;
}


body{

    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    line-height: 1.6;

    background-image: linear-gradient(to left right, var(--color-primary-light), var(--color-primary-dark)); /* IT DOES NOT WORK*/  
    
   /*  background-image: radial-gradient(circle at center, var(--color-primary-light), var(--color-primary-dark));  IT WORKS */

    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
}
    <body>

       <h1>Some content</h1>
      
    </body>

1 Ответ

0 голосов
/ 22 января 2020

При правильном значении направления оно работает. «влево-вправо» не является направлением, «влево» будет, «влево-вверх» будет работать или угол. 

 /* COLORS */

:root{
    --color-primary: #eb2f64;
    --color-primary-light: #FF3366;
    --color-primary-dark: #BA265D;

    --color-grey-light-1: #faf9f9;
    --color-grey-light-2: #f4f2f2;
    --color-grey-light-3: #f0eeee;
    --color-grey-light-4: #ccc;

    --color-grey-dark-1: #333;
    --color-grey-dark-2: #777;
    --color-grey-dark-3: #999;
}

/* ============================================================== */

*{
    margin: 0;
    padding: 0;
}

*,
*::after,
*::before{
    box-sizing: inherit;
}

html{
    box-sizing: border-box;
    font-size: 62.5%;
    min-height: 100vh;
}


body{

    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    line-height: 1.6;

    background-image: linear-gradient(to left top, var(--color-primary-light), var(--color-primary-dark)); /* IT DOES NOT WORK*/  
    
   /*  background-image: radial-gradient(circle at center, var(--color-primary-light), var(--color-primary-dark));  IT WORKS */

    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
}
    <body>

       <h1>Some content</h1>
      
    </body>
...