Pourquoi y a-t-il des rayures dans mon arrière-plan dégradé linéaire et comment puis-je les corriger ?-tutoriel CSS-php.cn

Pourquoi y a-t-il des rayures dans mon arrière-plan dégradé linéaire et comment puis-je les corriger ?

DDD

Libérer： 2024-12-22 17:30:14

original

432 Les gens l'ont consulté

Why Are There Stripes in My Linear Gradient Background, and How Can I Fix Them?

Bannir les rayures d'arrière-plan du dégradé linéaire

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

Dans le cas d'un dégradé orienté verticalement, la marge de l'élément body se propage à l'élément HTML, ce qui donne une zone de 8 pixels de hauteur. Par la suite, le dégradé 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 de corps 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 éliminer les rayures gênantes. Cela résout les problèmes de propagation, permettant au gradient linéaire d'être appliqué en douceur sans interruption.

 hauteur : 100vh ; <br> arrière-plan : dégradé linéaire (vers le haut, rouge, jaune);<br>}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Article précédent：Comment centrer verticalement un conteneur à l'aide de Bootstrap et d'autres méthodes ? Article suivant：La propriété CSS `content` peut-elle injecter du HTML ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur