Comment superposer un dégradé sur une image d'arrière-plan pour un effet de fondu ?

Combinaison d'une image d'arrière-plan et d'un dégradé pour un effet de fondu

Lorsque vous tentez de superposer un dégradé linéaire sur une image d'arrière-plan, certains utilisateurs peuvent rencontrer des difficultés rendant les deux éléments visibles. Ce problème survient lorsque l'URL de l'image d'arrière-plan est mal placée dans le code CSS.

Pour résoudre ce problème, assurez-vous que l'URL de l'image d'arrière-plan est positionnée à la fin de la ligne CSS. Cela écrase les déclarations d'arrière-plan précédentes, permettant au dégradé d'apparaître sur l'image.

background:
 linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%),
 url('image.jpg') no-repeat;

Placer l'URL de l'image de cette manière demande au navigateur de charger d'abord le dégradé, puis de superposer l'image par-dessus. Cette approche produit l'effet de fondu souhaité en bas de l'arrière-plan, tout en préservant la visibilité de l'image.

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!