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
394856 Ansichten: Anzahl der Besuche der Frage
5 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

5 Antworten

Answer 2

847voto

Bryan Downing Punkte 14596

Wenden Sie das folgende CSS an:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Edit : Hinzugefügt margin: 0; zur Körperdeklaration per Kommentar ( Martin ).

Edit : Hinzugefügt background-attachment: fixed; zur Körperdeklaration per Kommentar ( Johe Grün ).

Beantwortet el 20 de Kann, 2010 von Bryan Downing (14596 Punkte )

Answer 3

184voto

Joshua Rudd Punkte 1771

Bezüglich einer früheren Antwort: Einstellung html y body a height: 100% scheint nicht zu funktionieren, wenn der Inhalt gescrollt werden muss. Hinzufügen von fixed in den Hintergrund zu stellen, scheint das Problem zu lösen - keine need for height: 100%;

Z.B.:

body {
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}

Beantwortet el 20 de Juli, 2010 von Joshua Rudd (1771 Punkte )

Answer 4

45voto

Ricardo Zea Punkte 9425

Ich weiß, ich bin zu spät dran, aber hier ist eine fundiertere Antwort.

Alles, was Sie tun müssen, ist die Verwendung von min-height: 100%; statt height: 100%; und Ihr Farbverlaufshintergrund erstreckt sich über die gesamte Höhe des Inhalt ohne Wiederholung, auch wenn der Inhalt blätterbar ist.

Zum Beispiel so:

html {
    min-height: 100%;
}

body {
    background: linear-gradient(#b5e48c, #457b9d);
}

Es gibt jedoch eine zweite Lösung.

Wie andere bereits gesagt haben, wird der Wert fixed zum background Deklaration wird der Farbverlauf über die gesamte Höhe des Ansichtsfenster .

Zum Beispiel so:

body {
    background: linear-gradient(#b5e48c, #457b9d) fixed;
}

Zugegeben, Sie müssen immer noch Folgendes angeben min-height: 100%; im html .

Hier ist eine Demo in CodePen, in der Sie mit beiden Lösungen spielen können: https://codepen.io/ricardozea/pen/abwGBmz?editors=1100

Beantwortet el 4 de Februar, 2017 von Ricardo Zea (9425 Punkte )

Answer 5

15voto

John Sanford Punkte 159

Hier ist, was ich getan habe, um dieses Problem zu lösen ... es wird den Farbverlauf für die gesamte Länge des Inhalts zeigen, dann einfach Fallback auf die Hintergrundfarbe (normalerweise die letzte Farbe im Farbverlauf).

   html {
     background: #cbccc8;
   }
   body {
     background-repeat: no-repeat;
     background: #cbccc8;
     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));
     background: -moz-linear-gradient(top, #fff, #cbccc8);
     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8');
   }

<body>
  <h1>Hello world!</h1>
</body>

Ich habe dies in FireFox 3.6, Safari 4 und Chrome getestet. Ich behalte die Hintergrundfarbe im Body für alle Browser, die aus irgendeinem Grund das Styling des HTML-Tags nicht unterstützen.

Beantwortet el 21 de Kann, 2010 von John Sanford (159 Punkte )

Answer 6

14voto

Justin Force Punkte 5907

Einstellung html { height: 100%} kann beim IE Schaden anrichten. Hier ist ein Beispiel (png). Aber weißt du, was gut funktioniert? Legen Sie Ihren Hintergrund einfach auf die <html> Tag.

html {
  -moz-linear-gradient(top, #fff, #000);
  /* etc. */
}

Der Hintergrund reicht bis zum unteren Rand, und es tritt kein merkwürdiges Bildlaufverhalten auf. Sie können alle anderen Korrekturen überspringen. Und dies wird weitgehend unterstützt. Ich habe noch keinen Browser gefunden, der es nicht zulässt, einen Hintergrund auf den html-Tag anzuwenden. Es ist vollkommen gültiges CSS und das schon seit einer Weile :)

Beantwortet el 11 de Kann, 2012 von Justin Force (5907 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: