渐变不使用位置:绝对

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (62)

我正在尝试使用线性渐变作为页面的背景。完全没有显示渐变,背景保持白色。这是重现问题的最小代码:

<!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中尝试过此操作。

提问于
用户回答回答于

如果您没有设置html背景,则将正文的背景应用于HTML。

由于body是绝对的,因此HTML的大小为0,并且不会触发任何HTML布局。

尝试申请:html {height:100%;} 看看它做了什么:http://codepen.io/anon/pen/JGApK

用户回答回答于

您可以添加position: relative;到父元素,在您的情况下,它是html标记。

html{
  position: relative;
}

所属标签

可能回答问题的人

  • gulu丶咕噜

    0 粉丝1 提问4 回答
  • 找虫虫

    6 粉丝0 提问3 回答
  • 朝夕熊博客

    1 粉丝2 提问3 回答
  • 女淘日记

    杭州吱吱吱科技 · 站长 (已认证)

    1 粉丝1 提问3 回答

扫码关注云+社区

领取腾讯云代金券