Question

我有一个线性渐变背景，但只有当我从身体中移除时它才有效：

 margin:0; 
 padding:0;

或者如果我删除div #todo或重命名它。

有什么问题？

body {

 margin:0; 
 padding:0;

background:
    linear-gradient(
        limegreen,
        transparent
    ),
    linear-gradient(
        90deg,
        skyblue,
        transparent
    ),
    linear-gradient(
        -90deg,
        coral,
        transparent
    );

background-blend-mode: screen !important;
}

#todo{
 position:absolute;
 top: 45%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 text-align:center;
}

HTML

<div id="todo">linear gradient not working... only works if I remove margin and padding in body or remove this div #todo</div>

https://jsfiddle.net/Lo2fzha4/

Answer 1

你需要设置一个高度。

将此添加到您的css：

html, body {
    height: 100%;
}

Answer 2

会发生这种情况，因为你的#todo div设置为position：absolute。你可以把它想象成是＆＃34;徘徊＆＃34;在身体上方，不增加身高或宽度。

如前所述，你需要给你的html和身体一个高度。

线性渐变不使用margin / padding 0和div #todo

2 个答案: