Gradient Hintergrund nicht dehnen, um von oben nach unten zu decken

Ich versuche, einen Farbverlauf Hintergrund zu implementieren. Hier ist der betroffene Code.Gradient Hintergrund nicht dehnen, um von oben nach unten zu decken

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

Allerdings deckt diese nur den Hintergrund, bis meine navbar, und dann wird der Hintergrund wiederholt sich. Ich habe versucht, den folgenden Code:

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

und den Hintergrund gerade verschwindet. Bitte helfen Sie.

Quelle

2017-07-03 Derek Langley

Wenn Sie nicht möchten, dass es wiederholt wird, fügen Sie am Ende des linearen Farbverlaufs keine Wiederholung hinzu.

Zum Beispiel:

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

Stellen Sie dann Ihre Höhe wie alles, was Sie wollen.

Wenn Sie es Höhe = 100% machen möchten, dann machen Sie einfach ein Div-Tag mit der folgenden 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;

Sie wollen den Körper nicht zu einem absoluten machen. Aber dann würden Sie nicht wiederholen müssen, wenn Sie es auf die zweite Art mit dem div-Tag tun würden.

Quelle

2017-07-03 14:12:22

Ich habe versucht, no-repeat Zugabe, aber der Hintergrund hält noch bis navbar. Ich habe versucht, Höhe hinzuzufügen: 100%, aber es gab keine Veränderung. –

Versuchen Sie es erneut, aber mit einem Div-Tag. Verwenden Sie nicht "position: absolute" auf dem Body-Tag. –

Die body wird nur die Höhe des Inhalts haben und selbst wenn Sie die Höhe auf 100% setzen, muss der Browser 100% von was wissen.

In diesem Fall ist es das übergeordnete Element html, das eine Höhe von 100% haben muss.

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>

Quelle

2017-07-03 14:32:49

Gradient Hintergrund nicht dehnen, um von oben nach unten zu decken

Antwort

Verwandte Themen