CSS3 Gradient Hintergrund auf Körper gesetzt nicht dehnen, sondern wiederholt?

Question

CSS3 Gradient Hintergrund auf Körper gesetzt nicht dehnen, sondern wiederholt?

Gefragt el 19 de Kann, 2010: Wann wurde die Frage gestellt
394859 Ansichten: Anzahl der Besuche der Frage
3 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ok, sagen wir, der Inhalt innerhalb der <body> ist insgesamt 300px hoch.

Wenn ich den Hintergrund meiner <body> mit -webkit-gradient o -moz-linear-gradient

Dann maximiere ich mein Fenster (oder mache es einfach größer als 300px), der Farbverlauf wird genau 300px hoch sein (die Höhe des Inhalts) und einfach wiederholen, um den Rest des Fensters zu füllen.

Ich gehe davon aus, dass dies kein Fehler ist, da es sowohl in Webkit als auch in Gecko dasselbe ist.

Aber gibt es eine Möglichkeit, den Farbverlauf so zu gestalten, dass er das Fenster ausfüllt, anstatt sich zu wiederholen?

Gefragt el 19 de Kann, 2010 von JD Isaacks

Answer 1

3 Antworten

Answer 2

-1voto

Joe Punkte 1

background: #13486d; /* for non-css3 browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#9dc3c3),   to(#13486d));  background: -moz-linear-gradient(top,  #9dc3c3,  #13486d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc3c3', endColorstr='#13486d');
background-repeat:no-repeat;

Beantwortet el 26 de April, 2011 von Joe (1 Punkte )

Answer 3

-1voto

grizzy Punkte 7

Das habe ich getan:

html, body {
height:100%;
background: #014298 ;
}
body {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298));
background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%);
background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%);

/*I added these codes*/
margin:0;
float:left;
position:relative;
width:100%;
}

bevor ich den Körper schwebte, gab es eine Lücke auf der Oberseite, und es war die Hintergrundfarbe von html angezeigt. wenn ich die bgcolor von html zu entfernen, wenn ich nach unten scrollen, ist der Farbverlauf abgeschnitten. so habe ich den Körper schwebte und legte es die Position auf relative und die Breite auf 100%. es funktionierte auf Safari, Chrome, Firefox, Opera, Internet expl oh warten: P

Was haltet ihr davon?

Beantwortet el 18 de Juli, 2011 von grizzy (7 Punkte )

Answer 4

-4voto

SANDER Punkte 1

Anstelle von 100% füge ich einfach etwas Pixxel hinzu, das funktioniert jetzt für die ganze Seite ohne Lücke:

html {     
height: 1420px; } 
body {     
height: 1400px;     
margin: 0;     
background-repeat: no-repeat; }

Beantwortet el 6 de Kann, 2011 von SANDER (1 Punkte )

CSS3 Gradient Hintergrund auf Körper gesetzt nicht dehnen, sondern wiederholt?

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

CSS3 Gradient Hintergrund auf Körper gesetzt nicht dehnen, sondern wiederholt?

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: