線性梯度不與餘量/填充0和DIV #todo工作

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格設置爲位置：絕對的。你可以想象它好像在你的身體上方「懸停」而不增加其高度或寬度。

如前所述，你需要給你的html和body一個高度。