Question

我一直很难弄清楚为什么为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>

这就是页面最终看起来的样子（注意页面上的重复渐变）： Screenshot of repeating gradient

所以，问题是，渐变在#container元素的底部结束，而不是继续到身体的末端。尽管在body CSS元素中明确声明了渐变。

其他人可以帮帮我吗？非常感谢！

注意：在FF中使用-moz前缀也会发生。

阅读这个让我更加困惑：“[线性渐变]的具体尺寸将与它所应用的元素相匹配。”这来自Mozilla directly

Answer 1

我已使用此修复此问题：

<!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>

Answer 2

那是因为身体的高度变成容器的高度960px。检查下面的小提琴，我已经将身高和宽度设为100％所以现在它不应该随着容器的结束而突然结束。我希望这有帮助。 http://jsfiddle.net/fNFfW/1/

它所属的线性渐变不匹配元素

2 个答案: