Fond de CSS Gradient Linéaire de Haut en Bas

Je tente de créer un dégradé linéaire de haut en bas comme:

Malheureusement ce que je reçois est:

Fond de CSS Gradient Linéaire de Haut en Bas

Voici mon code HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Test Page</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
        Hi
</body>
</html>

Et mon CSS:

body{
  background: linear-gradient(0deg, white, blue 80%) ;
}

Si je ne 90deg, au lieu de 0deg puis-je obtenir ceci:

Fond de CSS Gradient Linéaire de Haut en Bas

J'ai besoin de ce gradient, mais il devrait être mis en rotation par 90deg c'est à dire à partir du haut vers le bas au lieu de gauche à droite. Je suis curieux de savoir pourquoi 0deg semble donner quelque chose de semblable à une répétition de gradient.

J'ai utilisé des navigateurs, Firefox 21 et Chrome 27. Je serais reconnaissant de tout conseil.

Quel est le calcul de la hauteur de votre corps? Essayez de définir CSS corps à 100% de la hauteur

InformationsquelleAutor O.O. | 2013-06-18

css css3

18

Essayez de définir l'arrière-plan sur la <html> au lieu - peut-être plus facile à gérer. Puis donnez-lui un height:100%; ainsi donc, pour vous s'étend à l'ensemble de la page.

J'ai aussi le mettre à no-repeat de sorte que vous obtenez seulement un dégradé au lieu de partir plus dans le bas lorsque vous avez plus de contenu.
```
html{
    height:100%;
    background: linear-gradient(0deg, white, blue 80%) no-repeat;
}
```
http://jsfiddle.net/daCrosby/nEQeZ/1/

Modifier

fr13d souligné dans les commentaires, avant de mettre le dégradé sur html le gradient de s'arrêter sur le bas de la première page, avant toute défilement. C'est-à-dire, le dégradé est coupée lorsque vous faites défiler (visible si la couleur de fond est différente de celle du gradient de couleur inférieure).

Un moyen de contourner cela est de mettre du style sur body à la place:
```
body{
    height:100%;
    background: linear-gradient(0deg, yellow, blue 80%) no-repeat;
}
```
http://jsfiddle.net/daCrosby/nEQeZ/117/
- Cela a parfaitement fonctionné DACrosby. Je vous remercie.
- Un peu en retard, mais il semble si votre <body> contient suffisamment de contenu pour s'étendre au-delà du bas de l'écran, une fois que vous faites défiler vers le bas, la nouvelle partie qui srcolls dans la vue n'a pas l'arrière-plan plus. (Que la partie inférieure de votre dégradé est blanc, ce ne sera pas question dans votre cas.)
- bon point @fr13d, je l'ai mise à jour de ma réponse
- Corriger @DACrosby. Juste pour dire explicitement, c'est pour toute autre âme en recherche de l'avantage: Si votre dégradé de couleur inférieure n'est pas la valeur par défaut blanc, vous pouvez maintenant définir le html background-color de votre dégradé de couleur inférieure. De cette façon, le body mélanges jusqu'à ce qu'il atteigne la html couleur, qui va plus loin vers le bas tout le chemin 🙂
- En outre, vous pouvez utiliser min-height: 100% et au moins Chrome étendre passé.
InformationsquelleAutor DACrosby
1

Est une façon de donner la <body> et <html> éléments explicite hauteur que les anciens n'en a pas, ni de contenu:

http://jsfiddle.net/qL9mg/1/
- Merci à la Dérive. Ce qui semble sorte de travail. Si vous le faites sans le html c'est à dire juste le body, alors il ne fonctionne pas. Pourquoi avez-vous besoin à la fois body et html spécifié?
- Aussi, si vous utilisez la barre de défilement pour faire défiler vers le bas, il a une ligne bleu foncé. Peut-on l'éviter?
- Parce que le <body> ne sais pas ce que 100% de la hauteur est référence, comme le pourcentage de la valeur est toujours par rapport à une autre valeur, par exemple la hauteur de son parent.
- Merci à la Dérive.
InformationsquelleAutor Adrift

essayez ceci:

html {
    height: 100%;
    background: linear-gradient(0deg, white, blue 80%) ;
}

body {
    height: 0%;
}

InformationsquelleAutor teteArg

1

Je suis d'accord avec la solution de @DACrosby, mais recommandent d'étendre le fond avec "fixe". Dans ce cas, votre arrière-plan va rester en place et vous aurez le gradient de l'ensemble du site, non seulement sur le dessus.
```
background: linear-gradient(0deg, red, blue 80%) fixed no-repeat;
```
InformationsquelleAutor WebWorker

Vous devez vous connecter pour publier un commentaire.