我正在尝试将线性渐变应用于我的身体,但这不起作用。现在,当我使用径向渐变时,它可以工作。为什么会这样?

问题描述 投票:1回答:1

我正在与Sass合作,我决定将颜色保留在var()中。所以,我使用:root作为我的范围声明。我已经基于在developer.mozilla上找到的信息在我的身体和html中添加了最小高度:https://developer.mozilla.org/es/docs/Web/CSS/linear-gradient

“注意如果将标签的背景图像属性设置为线性渐变,则除非将文档根目录(例如标签)的min-height属性设置为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>

我正在与Sass合作,我决定将颜色保留在var()中。所以,我使用:root作为我的范围声明。我已经根据发现的信息在我的身体和html中添加了最小高度...

css linear-gradients
1个回答
0
投票

具有正确的方向值。 “向左向右”不是方向,“向左”将是,“向左上方”将起作用或成一个角度。

© www.soinside.com 2019 - 2024. All rights reserved.