それが属している要素と一致しない線形勾配

body要素に対して指定された直線勾配が、その子要素の1つのエッジの後で停止している理由を調べるのは苦労しています。だから、それが属している要素と一致しない線形勾配

、私はこの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という接頭辞を使用する場合もあります。

これを読んで私はもっと混乱しました。「[線形勾配の]具体的なサイズは、適用する要素の1つに一致します。これはからです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

それはボディの高さが960pxであるコンテナの高さになるからです。下記のフィドルをチェックしてください。ボディの高さと幅を100％にしましたので、コンテナの終わりに突然終了しないでください。私はこれが役立つことを願っています。 http://jsfiddle.net/fNFfW/1/

出典

2012-03-07 16:43:09 websymphony

を、問題が残っています。私は体がそれが子要素の次元に限定されていることを理解しています。私は、明示的にコンテナの高さを指定することによってそれを修正しました。 – Alex

これは、ページ上にスクロールバーを常に表示し、人々はページの空の下にスクロールします。 html自体にグラデーションを指定し、高さを100％にしてみてください。例えば。 'html { 高さ：100％; 背景：-webkit-gradient（線形、0％0％、71％92％、from（＃1F4BA0）、（＃070322））; バックグラウンド：-moz-linear-gradient（40％75％90deg、＃1F4BA0、＃070322）;} – websymphony

100％の高さは子要素の100％なので、同じ問題です！ :) – Alex

それが属している要素と一致しない線形勾配

答えて

関連する問題