Gig*_*igi 5 css linear-gradients css3
我正在尝试使用线性渐变作为页面的背景.渐变没有显示,背景保持白色.这是重现问题的最小代码:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<style type="text/css">
body
{
width:100%;
margin-left:-50%;
position:absolute;
left:50%;
background: rgb(0, 0, 0);
background: -moz-linear-gradient(270deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);
background: -webkit-linear-gradient(270deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);
background: -o-linear-gradient(270deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);
background: -ms-linear-gradient(270deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);
background: linear-gradient(0deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);
}
</style>
</head>
<body>
This is a test and a bad one at that.
</body>
</html>
现在,如果我删除position:absolute,渐变工作.我究竟做错了什么？我需要那个position:absolute,所以我该怎么办？
编辑:在Chrome和Firefox中尝试过此操作.
G-C*_*Cyr 11
如果您没有设置html背景,则将正文的背景应用于HTML.
由于body是绝对的,因此HTML的大小为0,并且不会触发任何HTML布局.
尝试申请:html {height:100%;}
并查看它的作用:http://codepen.io/anon/pen/JGApK