Comment puis-je contrôler l'opacité de l'image d'arrière-plan avec le contenu généré CSS ?

L'opacité des images d'arrière-plan CSS rendue possible grâce au contenu généré

Contrairement à l'ajustement de l'opacité des couleurs d'arrière-plan, l'ajustement de la valeur alpha des images d'arrière-plan était auparavant considéré comme un défi. Cependant, le contenu généré CSS offre une solution pour modifier dynamiquement l'opacité des images d'arrière-plan.

Pour mettre en œuvre cette technique, créez un conteneur div avec une position et des dimensions spécifiées, et remplissez-le avec les éléments de contenu restants. Ensuite, définissez l'image d'arrière-plan dans le pseudo-élément créé pour le conteneur. La propriété d'opacité peut ensuite être manipulée au sein du pseudo-élément.

Un exemple de démonstration peut être trouvé sur http://jsfiddle.net/gaby/WktFm/508/. Vous trouverez ci-dessous l'extrait de code nécessaire :

HTML

<div>

CSS

.container {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

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

Alors que l'opacité du généré le contenu ne peut pas être modifié directement, il peut toujours être contrôlé dynamiquement via des événements et des classes CSS. Par exemple, le code suivant ajusterait l'opacité à 1 lors du survol :

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

De plus, des transitions CSS peuvent être utilisées pour animer les changements d'opacité en douceur. En ajoutant les propriétés suivantes à la règle .container:before, l'opacité passera à 1 sur 1 seconde :

-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;

Il est important de noter la compatibilité variable de cette technique selon les différents navigateurs. Firefox 5 et versions ultérieures le prennent en charge, mais Internet Explorer 9 et versions ultérieures ne le prennent pas en charge. Les navigateurs basés sur Webkit comme Chrome peuvent avoir une prise en charge incohérente en fonction de leur version.

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!