Comment ajuster l'opacité de l'image d'arrière-plan d'une div uniquement ?

Opacité pour l'image d'arrière-plan Div uniquement

Dans la conception Web, définir les bons niveaux d'opacité peut améliorer l'attrait visuel des éléments de votre page. Cependant, il peut être difficile d'ajuster l'opacité d'une image d'arrière-plan sans affecter les autres éléments du même conteneur. Voici comment obtenir cet effet :

Une méthode consiste à utiliser un pseudo-élément CSS, comme suggéré dans la question :

.myDiv {
  background-image: url("your_image.png");
  opacity: 0.5;
}

.myDiv::before {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Cela crée un élément caché (::before) qui superpose l'image d'arrière-plan et définit son opacité à 0,5, tout en laissant le texte dans le div inchangé.

Cependant, vous pouvez également obtenir le même effet en utilisant une approche plus simple :

.myDiv {
  background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");
}

Cette méthode crée un dégradé linéaire avec deux arrêts de couleur, où les deux arrêts spécifient une couleur blanche semi-transparente (#FFFFFF) avec une opacité de 0,5, suivie de l'image d'arrière-plan . Cela garantit que l'image d'arrière-plan apparaît avec une opacité de 50 %, tandis que le texte à l'intérieur du div reste entièrement 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!