Comment puis-je superposer une couleur sur une image d'arrière-plan en utilisant uniquement CSS ?

Superposition d'images avec des couleurs à l'aide de CSS

Recherche d'une méthode pour améliorer les visuels de votre site Web en superposant une couleur sur une image d'arrière-plan sans recourir à des des éléments ? CSS fournit une solution élégante qui élimine le besoin de DIV supplémentaires ou d'effets de survol.

Utilisation du dégradé pour la superposition

Une approche consiste à utiliser plusieurs arrière-plans. Par exemple, vous pouvez créer un dégradé translucide sur votre image :

html {
  min-height: 100%;
  background:
    linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)),
    url(image.jpg);
  background-size: cover;
}

Utiliser une ombre incrustée

Vous pouvez également créer une ombre incrustée substantielle :

.overlay {
  inset: 0;
  box-shadow: inset 0 0 9999px 100% rgba(0, 0, 0, 0.8);
}

Insérez ce bloc CSS dans l'élément parent de l'image d'arrière-plan.

Ces deux Les techniques obtiennent l'effet souhaité, vous permettant d'ajouter une superposition d'une seule couleur à votre image d'arrière-plan en utilisant uniquement CSS.

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!