it-swarm.com.de

Farbverlaufshintergrund füllen Seite mit CSS

Ich habe diesen Verlaufshintergrund, möchte aber nicht, dass er sich so wiederholt, wie er die Seite ausfüllt. Ich möchte, dass er einen großen Verlauf aufweist, der die Seite ausfüllt.

html:

<!DOCTYPE html>
<head>
    <meta charset = "UTF-8"/>
    <title>Home</title>
    <link rel="stylesheet" text="text/css" href="css.css">
</head>
<body>
    </body>

CSS:

p {
    font-family:"Arial Black";
    line-height:120%;
}
html {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: #70bg32;
    background-repeat:no-repeat;
    background: -webkit-linear-gradient( to left top, blue, red);
    background: -moz-linear-gradient( to left top, blue, red);
    background: -ms-linear-gradient( to left top, blue, red);
    background: -o-linear-gradient( to left top, blue, red);
    background: linear-gradient( to left top, blue, red);
}

http://jsfiddle.net/F7vf9/

24
user2391236

Damit der Farbverlauf das Ansichtsfenster ausfüllt, geben Sie dem Element <html> Eine Höhe von 100%: Geige

html {
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: #70bg32;
    background-repeat:no-repeat;
    background: -webkit-linear-gradient( to left top, blue, red);
    background: -moz-linear-gradient( to left top, blue, red);
    background: -ms-linear-gradient( to left top, blue, red);
    background: -o-linear-gradient( to left top, blue, red);
    background: linear-gradient( to left top, blue, red);
}

Ersetzen Sie height: 100%; Durch min-height: 100%;, Um zu verhindern, dass sich der Verlauf über den sichtbaren Bereich des Ansichtsfensters hinaus wiederholt (vorausgesetzt, es gibt eine Bildlaufleiste).

43
Adrift

Bis heute funktioniert keines der oben genannten Verfahren. Der lineare Verlauf wiederholt sich.

Um den Farbverlauf über die gesamte Seite zu strecken, müssen Sie dies in die CSS einfügen:

body {
  background: linear-gradient(to left top, blue, red) fixed;
}

Das ist alles.

58
Techno.Shaman

Ich stimme Adrift zu und füge Höhe hinzu: 100% zum HTML-Tag strecken den Farbverlauf. Sie können auch die Hintergrundgröße entfernen: Abdeckung. Das funktioniert auch:

html {
  height: 100%;
}
body {
  width: 100%;
  background: linear-gradient(to left top, blue, red);
}

Sie sollten in der Lage sein, den Rest der linearen Verläufe für andere Browser ohne Probleme hinzuzufügen. Hoffe das hilft!

4
CodeEngie

Falls es noch jemand braucht:

Ich habe meinen zum Arbeiten gebracht, indem ich die Höhe des Abschnitts, der den Hintergrund mit Farbverlauf aufweist, auf über 200% erhöht habe.

(Ich habe das No Repeat und Cover beigefügt, aber es hatte keine Wirkung.)

mySection {
    width: 100%;
    height: 220%; 
    background: linear-gradient(90deg, rgb(23, 156, 57) 5%, rgb(33, 211, 27) 60%)
                center center no-repeat/ cover;
}
0
Jeffrey

Erstellen Sie so viele komplexe Hintergründe, indem Sie nur CSS und keine Bilder verwenden. Es ist sehr einfach und erstaunlich, dass Sie noch nie so etwas gesehen haben. Sie müssen keinen Code schreiben. Gehen Sie einfach zur Website und wählen Sie Ihren Hintergrund aus und kopieren Sie den Code Wiederholen des linearen Steigungshintergrundes

besuchen Sie https://youtu.be/Awmnr8B58HA

background:linear-gradient(45deg, rgba(8, 211, 172, 0.45) 0%, rgba(8, 211, 172, 0.45) 12.5%,rgba(62, 29, 50, 0.45) 12.5%, rgba(62, 29, 50, 0.45) 25%,rgba(54, 55, 67, 0.45) 25%, rgba(54, 55, 67, 0.45) 37.5%,rgba(47, 81, 85, 0.45) 37.5%, rgba(47, 81, 85, 0.45) 50%,rgba(23, 159, 137, 0.45) 50%, rgba(23, 159, 137, 0.45) 62.5%,rgba(16, 185, 155, 0.45) 62.5%, rgba(16, 185, 155, 0.45) 75%,rgba(31, 133, 120, 0.45) 75%, rgba(31, 133, 120, 0.45) 87.5%,rgba(39, 107, 102, 0.45) 87.5%, rgba(39, 107, 102, 0.45) 100%),linear-gradient(135deg, rgb(87, 116, 221),rgb(35, 4, 229))
0