Comment créer un effet de fondu progressif sur les images d'arrière-plan à l'aide de dégradés CSS ?

Création d'un fondu progressif dans les images d'arrière-plan à l'aide de dégradés CSS

Lors de l'application d'un dégradé linéaire sur une image d'arrière-plan, il peut être difficile à afficher les deux éléments simultanément. Les étapes suivantes vous guideront tout au long du processus :

Tentative incorrecte :

body {
  background: url('background_image.jpg') no-repeat,
    -webkit-gradient(linear, left top, left bottom,
      from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1)));
}

Dans cet exemple, le dégradé ne s'affichera pas car l'image d'arrière-plan est placée avant

Approche correcte :

Pour afficher correctement le dégradé et l'image d'arrière-plan, assurez-vous que l'image de fond soit placée en fin de ligne CSS, de la manière suivante :

body {
  background: -webkit-gradient(linear, left top, left bottom,
    from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1))),
    url('background_image.jpg') no-repeat;
}

En plaçant l'URL de l'image en fin de ligne, le dégradé se superposera à l'image, procurant l'effet de fondu souhaité du noir au transparent en bas du fond.

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!