Comment puis-je superposer un dégradé sur une image d'arrière-plan en CSS ?

Superposition de dégradé sur une image d'arrière-plan : dévoiler la solution

L'incapacité d'afficher simultanément une image d'arrière-plan et une superposition de dégradé peut être frustrante. Cependant, la solution est simple et réside dans l'ordre correct des éléments dans votre déclaration CSS.

Pour obtenir l'effet de fondu souhaité du noir au transparent au bas de votre arrière-plan, les étapes suivantes sont cruciales :

1. Positionnez l'URL de l'image de fond en fin de ligne : Contrairement à l'intuition, l'URL de l'image de fond doit être placée après la déclaration du dégradé, car vu dans le code corrigé :

.css {
  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('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  height: 200px;
}

2. Assurez-vous de la syntaxe correcte : L'exemple de code contient une syntaxe CSS valide pour la déclaration du dégradé. Les multiples arrêts de couleur sont définis entre parenthèses, et les positions de début et de fin du dégradé sont spécifiées à l'aide de pourcentages.
3. Fournissez une hauteur pour le conteneur : Pour garantir que l'effet de dégradé est visible, une hauteur doit être définie pour l'élément conteneur contenant le dégradé et l'image d'arrière-plan. Dans le code fourni, l'élément ".css" a une hauteur de 200 pixels.

Avec ces ajustements en place, la superposition de dégradé s'affichera désormais correctement au-dessus de l'image d'arrière-plan, obtenant ainsi le effet de décoloration souhaité.

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!