Maison > interface Web > tutoriel CSS > Comment superposer un dégradé sur une image d'arrière-plan pour un effet de fondu ?

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

Patricia Arquette
Libérer: 2024-12-25 01:49:09
original
933 Les gens l'ont consulté

How Do I Overlay a Gradient on a Background Image for a Fading Effect?

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;
Copier après la connexion

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!

source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal