bannissant les bandes d'arrière-plan à partir du gradient linéaire

Lorsque vous utilisez la propriété linéaire-gradient pour un arrière-plan, vous pouvez rencontrer des bandes notables lorsque la direction est définie en haut ou en bas. Ces artefacts disgracieux peuvent être attribués à un phénomène de propagation d'arrière-plan complexe.

En cas de gradient orienté verticalement, la marge de l'élément corporel se propage à l'élément HTML, résultant en une zone de 8 px de haut. Par la suite, le gradient linéaire s'étend sur toute cette hauteur, produisant des motifs répétitifs.

Solution:

Pour résoudre ce problème, assurez-vous que l'élément corporel a une hauteur suffisante. En spécifiant une hauteur de toute valeur supérieure à 0 (par exemple, 100VH), vous pouvez empêcher l'arrière-plan de s'effondrer et d'éliminer les rayures distrayantes. Cela résout les problèmes de propagation, permettant au gradient linéaire d'être appliqué en douceur sans perturbations.

 hauteur: 100vh; 
 fond: linéaire-gradient (vers le haut, rouge, rouge, jaune); 
}  pre>