線性漸變與它所屬的元素不匹配

我一直在很難弄清楚爲什麼爲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元素的底部，而不是繼續到身體的盡頭。儘管在正文CSS元素中明確聲明瞭漸變。

其他人可以幫我嗎？非常感激！

注意：FF中也使用-moz前綴。

讀這讓我更困惑：「[線性漸變的]具體大小將匹配它適用的元素之一。」這是從Mozilla directly

來源

2012-03-07 Alex

我有固定使用這個問題：

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

來源

2012-03-07 16:54:11 Alex

這不是我正在尋找的答案，但只要您知道您想要的頁面的高度，它就會工作。 – Ulthran 2016-03-29 01:24:32

這是因爲身體的高度變成了960px的容器高度。檢查下面的小提琴，我已經使身高和體寬達到100％，所以現在它不應該在容器結束時突然結束。我希望這可以幫助。 http://jsfiddle.net/fNFfW/1/

來源

2012-03-07 16:43:09 websymphony

這裏，問題依舊。我瞭解身體受限於它的子元素尺寸。我通過明確指定容器的高度來修復它。 – Alex 2012-03-07 16:51:26

這將在頁面上顯示一個滾動條，人們將滾動到頁面的空白底部。嘗試在html本身上指定漸變並使其高度爲100％。例如。 'html { height：100％; （＃1F4BA0）到（＃070322））的背景：-webkit-梯度（線性，0％0％，71％92％）。背景：-moz-linear-gradient（40％75％90deg，＃1F4BA0，＃070322）;}' – websymphony 2012-03-07 16:56:53

原因是100％高度僅爲子元素的100％，所以它是同樣的問題！ :) – Alex 2012-03-07 16:59:19

線性漸變與它所屬的元素不匹配

回答

相關問題