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

Manipulation de l'opacité de l'image d'arrière-plan via CSS

Contrairement à la modification de l'opacité des couleurs d'arrière-plan, des requêtes se posent concernant l'ajustement de l'opacité de l'image d'arrière-plan. Bien que l'enregistrement d'images avec différents niveaux de transparence soit une option, un contrôle dynamique de la valeur alpha est souhaitable.

À cette fin, une approche simple consiste à imbriquer deux éléments DIV :

<div>

Bien que fonctionnel, ce La méthode est lourde et perturbe les mises en page plus complexes.

Contenu généré CSS

Une alternative La solution réside dans le contenu généré CSS, vous permettant de définir l'image d'arrière-plan directement sur un élément conteneur :

.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;
}

Cette méthode permet le contrôle de l'opacité de l'image d'arrière-plan.

Manipulation dynamique de l'opacité

Cependant, il n'est pas possible de modifier dynamiquement l'opacité des fichiers générés. contenu.

Pour contourner cette limitation, pensez à utiliser des classes et des événements CSS :

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

Transitions CSS

Les transitions CSS peuvent être utilisées pour animer l'opacité de l'image d'arrière-plan de manière dynamique :

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

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!