渐变不使用位置:绝对
渐变不使用位置:绝对
提问于 2014-01-29 03:56:43
我正在尝试让一个线性渐变作为我的页面的背景。渐变根本没有显示，背景仍然是白色的。以下是重现该问题的最小代码：
<!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
Stack Overflow用户
回答已采纳
发布于 2014-01-29 04:24:05
如果不设置HTML背景，则body的背景将应用于html。
由于body是绝对的，所以它对HTML的大小为0，并且不会触发HTML布局的任何内容。
尝试应用：html {height:100%;}，看看它能做什么：http://codepen.io/anon/pen/JGApK
Stack Overflow用户
发布于 2014-01-29 04:20:44
这很简单，
您只需将background-attachment: fixed !important;添加到body和/或将height:100%添加到html。
做了件小菜一碟：http://jsfiddle.net/filever10/NA7a6/
尽管这两个选项都会将背景从body切换到html，因此将背景直接放在html上可能是一个更好的解决方案，因为它将不管怎样都会放到那里。
Stack Overflow用户
发布于 2018-06-09 03:48:49
您可以只将position: relative;添加到父元素中，在本例中是html标记。
html{
position: relative;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21415522
复制相关文章
相似问题
腾讯云开发者
