CSSの背景グラデーションの繰り返しの問題

幅と高さを拡張する必要があるhtmlページがあるので、上下左右にスクロールできる必要がありますが、 xとソリッドカラーを下にしてください。CSSの背景グラデーションの繰り返しの問題

ダウン剥奪コード：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<style type="text/css" media="screen"> 
    html { 
     height: 100%; 
     background-color: #366fcd; } 
    body { 
     margin: 0; 
     height: 100%; 
     width: 100%; 
     background-color: #366fcd; 
     background: -moz-linear-gradient(center top, #316494 0%,#366fcd 100%); 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #316494),color-stop(1, #366fcd)); 
     background-repeat: repeat-x; 
    } 
    div#TheElement { 
     position: absolute; 
     width: 100px; 
     height: 100px; 
     background-color: #fff; 
     left: 2000px; 
     top: 2000px; 
    }  
</style>  
</head> 
<body> 
    <div id="TheElement">   
    </div> 
</body> 
</html>

あなたは下にスクロールするとき、これはソリッドカラー（＃1 366fcd）に勾配を実行しますが、あなたは右にスクロールするとき、勾配が停止し、あなたもそこにソリッドカラーを参照してください。 See example。

背景色を削除すると：＃366fcd; }html要素の場合、勾配は期待どおりにx軸に沿って繰り返されますが、下にスクロールするとグラデーションが停止し、白が表示されます。 See example。

私は常にバックグラウンドイメージの使用に頼ることができますが、CSSを動作させることを好むでしょう。

ええ、これはOSX LionのChromeとFFでテストされています。

アンソニー

出典

2011-09-15 littlecharva

必要なのはbackground-attachmentプロパティです。このプロパティを使用すると、身体が画面の高さを完全に埋めている間に、身体の背景を修正できます。私の例で

background-attachment:fixed; 
height:100%;

ルックはこちら http://jsfiddle.net/mohsen/TanzY/

ここにあなたの例では、固定されている：http://jsbin.com/ileqid/4

私はbackground-repeatプロパティを削除しても、より視覚的であることを色を変えました。

背景をスクロールする場合は、the background-attachmentをscrollに設定する必要があります。あなたが高いコンテンツを持っている場合にのみスクロールが起こるので、thisの例ではボディータグheightを3000pxに設定しています。

出典

2011-09-15 07:51:41 Mohsen

あなたの固定JSBinの例では、Mac上でクロム13で動作するようには思えません。私が右にスクロールすると、グラデーションの背景はまだ消えます。 –

これは、OPがhtmlタグのCSSを設定したためです。 – Mohsen

aha！私はそれがそれのようなものかもしれないと思った。よくできました。 –

htmlタグにグラデーションを適用します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <style type="text/css" media="screen"> 
     html, body {    
      width:100%; 
      height:100%; 
      margin:0; 
      padding:0;}   
     html { 
      background:red -moz-linear-gradient(center top, #316494 0%,red 100%) repeat-x; 
      background:red -webkit-gradient(linear, left top, left bottom, color-stop(0, #316494),color-stop(1, red)) repeat-x; 
     } 
     div#TheElement { 
      position: absolute; 
      width: 100px; 
      height: 100px; 
      background-color: #fff; 
      left: 2000px; 
      top: 2000px; 
      border:1px solid #000; 
     }  
    </style>  
    </head> 
    <body> 
     <div id="TheElement">   
     </div> 
    </body> 
</html>

FF6、クロム13でテスト

とSafari 5

出典

2011-09-15 08:26:47 easwee

CSSの背景グラデーションの繰り返しの問題

答えて

関連する問題