Comment puis-je ajuster l'opacité de l'image d'arrière-plan à l'aide de CSS ?

Ajustement de l'opacité de l'image d'arrière-plan à l'aide du contenu généré CSS

La propriété CSS background-image-opacity, comme son nom l'indique, vous permet de modifier la transparence des images d'arrière-plan. Cependant, il est important de noter qu'une telle propriété n'existe pas dans CSS.

Utilisation du contenu et des classes générés par CSS

Une approche alternative consiste à utiliser le contenu généré par CSS pour créer un arrière-plan décoloré :

<div class="container">
  contents
</div>

.container {
  position: relative;
  z-index: 1;
  overflow: hidden; /* Consider cropping the image */
}

.container:before {
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  content: url('path/to/image.ext');
  opacity: 0.4;
}

.container:hover:before {
  opacity: 1;
}

Bien que cette technique permette d'afficher une image d'arrière-plan décolorée, elle ne le fait pas permettre l'ajustement dynamique de son opacité.

Utilisation des transitions CSS

Pour animer l'opacité de l'image d'arrière-plan, vous pouvez utiliser des transitions CSS :

.container:before {
  -webkit-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  transition: opacity 1s linear;
}

Cet ajout à la règle .container:before entraînera le passage de l'opacité à 1 sur une durée d'un deuxième.

Compatibilité des navigateurs

• Firefox 5 et supérieur (potentiellement FireFox 4 également)
• IE 9 ( Échec )
• Navigateurs basés sur Webkit (Chrome 26 et supérieur)

Il convient de noter que cette approche n'est actuellement prise en charge que par la dernière version de Firefox.

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!