2017-07-03 13 views
0

グラデーションの色の背景を実装しようとしています。ここに関係するコードがあります。グラデーションの背景が上から下まで伸びない

#grad { 
 
    background: -webkit-linear-gradient(red, white, blue); 
 
    background: -moz-linear-gradient(red, white, blue); 
 
    background: -o-linear-gradient(red, white, blue); 
 
    background: linear-gradient(red, white, blue); 
 
}
<body id="grad">...</body>

しかし、これは私のナビゲーションバーまでの背景をカバーして、背景は繰り返します。

#grad { 
 
    background: -webkit-linear-gradient(red, white, blue); 
 
    background: -moz-linear-gradient(red, white, blue); 
 
    background: -o-linear-gradient(red, white, blue); 
 
    background: linear-gradient(red, white, blue); 
 
    height: 100%; 
 
    width: 100%; 
 
    left: 0px; 
 
    top: 0px; 
 
    z-index: 0; 
 
    position: absolute; 
 
}
<body id='grad'>...</body>

だけが消える背景:私は、次のコードを試してみました。助けてください。

答えて

0

リピートする必要がない場合は、リニアグラデーションの最後にno-repeatを追加するだけです。例えば

background: linear-gradient(red, white, blue) no-repeat; 

次に、あなたが望むものとして、あなたの高さを設定。

高さ= 100%にしたい場合は、divタグを次のCSSで作成します。

background: -webkit-linear-gradient(red, white, blue) no-repeat; 
background: -moz-linear-gradient(red, white, blue) no-repeat; 
background: -o-linear-gradient(red, white, blue) no-repeat; 
background: linear-gradient(red, white, blue) no-repeat; 
position: absolute; 
height: 100%; 
width:100%; 
left:0; 
top:0; 

ボディを絶対にしたくないです。しかし、divタグを使って2番目の方法を実行する場合は、再びno-repeatは必要ありません。

+0

私はリピートを添加しない試みたが、背景は、まだナビゲーションバーまで停止します。私は高さを追加しようとしました:100%、しかし変化はありませんでした。 –

+0

Divタグを付けてもう一度お試しください。 bodyタグに 'position:absolute'を使用しないでください。 –

0

bodyのコンテンツの高さは100%に設定されていても、ブラウザはのどの値をの100%にする必要があります。

この場合、親のhtml要素の高さを100%に設定する必要があります。

html { 
 
    height: 100%; 
 
} 
 

 
#grad { 
 
    background: -webkit-linear-gradient(red, white, blue); 
 
    background: -moz-linear-gradient(red, white, blue); 
 
    background: -o-linear-gradient(red, white, blue); 
 
    background: linear-gradient(red, white, blue); 
 
}
<body id="grad"></body>

関連する問題