Comment puis-je superposer une couleur translucide sur une image d'arrière-plan à l'aide de CSS ?

Couche de couleur translucide sur l'image d'arrière-plan

Vous avez mentionné avoir rencontré un problème en essayant de superposer un calque de couleur translucide sur une image d'arrière-plan à l'aide de CSS. Explorons comment obtenir cet effet efficacement.

Votre approche initiale utilisant à la fois background-image et background-color est techniquement correcte mais ne produit pas le résultat souhaité car la propriété background-color remplace l'image d'arrière-plan. Pour résoudre ce problème, vous pouvez envisager l'alternative suivante :

background-image: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);
background-blend-mode: overlay;

La propriété background-blend-mode vous permet de spécifier comment plusieurs calques d'arrière-plan interagissent. Dans ce cas, le mode de fusion superposition superpose la couleur translucide sur l'image d'arrière-plan, créant ainsi un calque semi-transparent.

Une autre approche qui repose uniquement sur CSS consiste à utiliser la propriété box-shadow :

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

En spécifiant une ombre de boîte intérieure transparente, vous pouvez créer efficacement un calque coloré qui recouvre l'image d'arrière-plan. Cette technique a l'avantage d'être une solution CSS pure, sans nécessiter d'éléments HTML supplémentaires.

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!