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

Superposition d'un dégradé CSS sur une image d'arrière-plan

De nombreux développeurs rencontrent des difficultés lorsqu'ils tentent d'afficher simultanément une image d'arrière-plan et un dégradé linéaire. Le but est de créer une transition progressive, généralement du noir au transparent, au bas de l'arrière-plan. Cependant, dans la plupart des cas, seul le dégradé ou l'image est visible, pas les deux.

La solution à ce problème réside dans la spécification correcte de l'ordre des éléments dans le style d'arrière-plan. Pour réussir à superposer le dégradé sur l'image, suivez cette syntaxe révisée :

body {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), to(rgba(0,0,0,1))),
  url("http://www.skrenta.com/images/stackoverflow.jpg") no-repeat;
}

En plaçant l'URL de l'image d'arrière-plan à la fin de la ligne, nous nous assurons qu'elle apparaît sous le dégradé, permettant ainsi aux deux éléments d'être visible.

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!