我正在尝试将 linear-gradient 应用到我的 body，但它不起作用。现在，当我使用 radial-gradient 时它起作用了。这是为什么？

Question

我正在使用 Sass，我决定将颜色保留在 var() 中。所以，我使用 :root 作为我的范围声明。根据在 developer.mozilla 找到的信息，我已经将 min-height 添加到我的 body 和 html 中：https://developer.mozilla.org/es/docs/Web/CSS/linear-gradient

" 注释如果您将标签的 background-image 属性设置为 linear-gradient，则渐变不会填充浏览器屏幕，除非您还设置了 min-height 属性文档根目录（例如标签）到 100%。"

我一直在尝试一些东西，比如为我的 body 添加一些边距，但没有任何效果。我访问了一些论坛，但无法解决我的问题。

变量工作正常，因为当我尝试 background-image: radial-gradient(circle at center, var(--color-primary-light), var(--color-primary-dark)); 时一切正常。我想知道为什么 background-image 在我使用 linear-gradient 时不适用，但在我使用 radial-gradient 时有效？

 /* 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>

Answer 1

它的工作方向有正确的值。 "to left right" 不是一个方向，"to left" 是，"to left top" 是一个角度。

 /* 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>

我正在尝试将 linear-gradient 应用到我的 body，但它不起作用。现在，当我使用 radial-gradient 时它起作用了。这是为什么？

I`m trying to apply linear-gradient to my body, but it doesn't work. Now, when I use radial-gradient it works. Why is that?

css

linear-gradients