我试图让一个线性渐变工作作为我的网页的背景。梯度是不显示在所有，背景仍然是白色的。以下是最小的代码重现这个问题：
<!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中尝试了此操作。
3条答案
按热度按时间2admgd591#
如果不设置html背景，正文的背景将应用于HTML。
因为body是绝对值，所以对于HTML它的大小为0，并且对于HTML布局它不触发任何东西。
尝试应用：
html {height:100%;}，看看它的作用：http://codepen.io/anon/pen/JGApKcczfrluj2#
那很简单
您只需要将
background-attachment: fixed !important;添加到body和/或将height:100%添加到html。拉小提琴：http://jsfiddle.net/filever10/NA7a6/
尽管两种方法都将背景从
body切换到html，但直接将背景放在html上可能是更好的解决方案，因为无论如何，背景都会放在那里。如下所示：http://jsfiddle.net/filever10/nRLNb/
2g32fytz3#
您可以只将
position: relative;添加到父元素中，在您的示例中是html标记。