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

12voto

Rick Smith Punkte 8705

Diese Seite enthält viele Teilinformationen, aber keine vollständigen Informationen. Hier ist, was ich tue:

Erstellen Sie hier einen Farbverlauf: http://www.colorzilla.com/gradient-editor/
Farbverlauf auf HTML anstelle von BODY einstellen.
Fixieren Sie den Hintergrund in HTML mit "background-attachment: fixed;".
Deaktivieren Sie die oberen und unteren Ränder von BODY
(optional) Ich erstelle normalerweise eine <DIV id='container'> dass ich alle meine Inhalte in

Hier ist ein Beispiel:

html {  
  background: #a9e4f7; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */ 
  background: -webkit-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg,  #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */
  background: linear-gradient(135deg,  #a9e4f7 0%,#0fb4e7 100%); /* W3C */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  background-attachment: fixed;
}

body {
  margin-top: 0px;
  margin-bottom: 0px;
}

/* OPTIONAL: div to store content.  Many of these attributes should be changed to suit your needs */
#container
{
  width: 800px;
  margin: auto;
  background-color: white;
  border: 1px solid gray;
  border-top: none;
  border-bottom: none;
  box-shadow: 3px 0px 20px #333;
  padding: 10px;
}

Dies wurde mit IE, Chrome und Firefox auf Seiten unterschiedlicher Größe und Bildlaufanforderungen getestet.

Beantwortet el 29 de Juli, 2013 von Rick Smith (8705 Punkte )

Answer 3

7voto

Alan Simpson Punkte 319

Hinzufügen eines Leerzeichens und des Wortes fest bis zum Ende sollte ausreichend sein. Es müssen keine Höhen eingestellt werden.

body{
    background: linear-gradient(#e4efe9,#93a5cf) fixed;
}

Beantwortet el 3 de Marsch, 2021 von Alan Simpson (319 Punkte )

Answer 4

4voto

subv3rsion Punkte 432

Dirty; vielleicht könnten Sie einfach ein min-height: 100%; zu den html- und body-Tags hinzufügen? Das oder zumindest eine Standard-Hintergrundfarbe, die das Ende Gradient Farbe als gut ist gesetzt.

Beantwortet el 19 de Kann, 2010 von subv3rsion (432 Punkte )

Answer 5

2voto

morefromalan Punkte 302

Ich hatte Probleme, die Antworten hierher zu bekommen.
Ich habe festgestellt, dass es besser funktioniert, ein Div in voller Größe im Body zu fixieren, ihm einen negativen z-Index zu geben und den Farbverlauf daran anzuhängen.

<style>

  .fixed-background {
    position:fixed;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .blue-gradient-bg {
    background: #134659; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */
  }

  body{
    margin: 0;
  }

</style>

<body >
 <div class="fixed-background blue-gradient-bg"></div>
</body>

Hier ist eine vollständige Probe https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55

Beantwortet el 19 de April, 2016 von morefromalan (302 Punkte )

Answer 6

0voto

Netsi1964 Punkte 2727

Ich habe diesen CSS-Code verwendet und er hat bei mir funktioniert:

html {
  height: 100%;
}
body {
  background: #f6cb4a; /* Old browsers */
  background: -moz-linear-gradient(top, #f2b600 0%, #f6cb4a 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2b600), color-stop(100%,#f6cb4a)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* IE10+ */
  background: linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b600', endColorstr='#f6cb4a',GradientType=0 ); /* IE6-9 */
  height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  background-position: 0px 0px;
}

Eine damit zusammenhängende Information ist, dass Sie Ihre eigenen großartigen Farbverläufe erstellen können unter http://www.colorzilla.com/gradient-editor/

/Sten

Beantwortet el 1 de April, 2012 von Netsi1964 (2727 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: