Css 线性梯度不匹配它所属的元素_Css_Gradient

Css 线性梯度不匹配它所属的元素

css

Css 线性梯度不匹配它所属的元素,css,gradient,Css,Gradient,我一直很难弄明白为什么为body元素指定的线性渐变在它的一个子元素的边缘之后停止我有一个HTML： <!DOCTYPE html> <html> <head> <style> #container { width: 960px; height: 700px; border: #FFF thick soli

我一直很难弄明白为什么为

body

元素指定的线性渐变在它的一个子元素的边缘之后停止

我有一个HTML：

<!DOCTYPE html>
<html>
    <head>
        <style>
            #container {
                width: 960px;
                height: 700px;
                border: #FFF thick solid;
                margin: auto;
            }
            body {
                background: -webkit-gradient(linear, 0% 0%, 71% 92%, from(#1F4BA0), to(#070322));
                background: -moz-linear-gradient(40% 75% 90deg,#1F4BA0, #070322);
                color: #FFF; border:0px; margin:0px; padding:0px;
            }
        </style>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>


#容器{
宽度：960px；
高度：700px；
边框：#FFF厚实线；
保证金：自动；
}
身体{
背景：-webkit梯度（线性，0%0%，71%92%，从（#1F4BA0）到（#070322））；
背景：-moz线性梯度（40%75%90度，#1F4BA0，#070322）；
颜色：#FFF；边框：0px；边距：0px；填充：0px；
}

这就是页面的最终外观（注意页面下方重复的渐变）：

因此，问题是，渐变结束于

#container

元素的底部，而不是继续到主体的末端。尽管在body CSS元素中显式声明了渐变

还有人能帮我吗？非常感谢

注意：在FF中使用-moz前缀也会发生这种情况

阅读这篇文章让我更加困惑：“[线性梯度]的具体尺寸将与它所应用的元素的尺寸相匹配。”这是来自

这是因为物体的高度变成了容器的高度，即960px。检查下面的小提琴，我已经使身体的高度和宽度100%，所以现在它不应该突然结束作为容器结束。我希望这有帮助。

我已通过以下方法解决了此问题：

<!DOCTYPE html>
<html>
    <head>
        <style>
            #main {

               background: -webkit-gradient(linear, 0% 0%, 71% 92%, from(#1F4BA0), to(#070322));
               background: -moz-linear-gradient(40% 75% 90deg,#1F4BA0, #070322);
               height:2300px;

            }

            #container {
                width: 960px;
                height: 700px;
                border: #FFF thick solid;
                margin: auto;
            }
            body { 
                color: #FFF; border:0px; margin:0px; padding:0px;
            }
        </style>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div id="main">
            <div id="container"></div>
        </div>
    </body>
</html>


#主要{
背景：-webkit梯度（线性，0%0%，71%92%，从（#1F4BA0）到（#070322））；
背景：-moz线性梯度（40%75%90度，#1F4BA0，#070322）；
高度：2300px；
}
#容器{
宽度：960px；
高度：700px；
边框：#FFF厚实线；
保证金：自动；
}
正文{
颜色：#FFF；边框：0px；边距：0px；填充：0px；
}

在这里，问题仍然存在。我理解身体被限制在它的子元素维度上。我通过明确指定容器的高度来修复它。这将在页面上始终显示一个滚动条，人们将滚动到页面的空底部。尝试在html本身上指定渐变，并使其高度为100%。比如说<代码>html{高度：100%；背景：-webkit渐变（线性，0%0%，71%92%，从（#1F4BA0）到（#070322））；背景：-moz线性渐变（40%75%90deg，#1F4BA0，#070322）}原因是100%高度仅为子元素的100%，所以这是相同的问题！）我同意，但当你像这里这样设置html的背景时：虽然容器只有100px高。整个html文档都有渐变。问题是html元素被定义为文档的可见窗口区域，而不是整个文档。我尝试了html的想法，但它会随着窗口的大小而重复。这不是我想要的答案，但只要你知道你想要的页面有多高，它就会起作用。