Comment puis-je créer des images d'arrière-plan transparentes avec le contrôle d'opacité en CSS ?

Images d'arrière-plan transparentes avec contrôle de l'opacité

En CSS, définir une image d'arrière-plan et ajuster son opacité sont des tâches distinctes. Cependant, il est possible de combiner ces deux éléments pour créer une image d'arrière-plan transparente.

Définition de l'image d'arrière-plan et de l'opacité

Pour définir une image d'arrière-plan, utilisez la propriété background-image avec une URL d'image valide . Par exemple :

#main {
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
}

Pour spécifier l'opacité de l'image d'arrière-plan, utilisez la propriété opacity. La valeur va de 0 (entièrement transparent) à 1 (entièrement opaque).

Cependant, l'application directe de l'opacité à la propriété background-image n'affecte que l'image, pas l'arrière-plan lui-même. Pour obtenir une image d'arrière-plan transparente, nous avons besoin d'une étape supplémentaire.

Création d'un calque d'arrière-plan transparent

Pour créer un calque transparent sur l'image d'arrière-plan, utilisez le CSS suivant :

#main {
    position: relative;
}
#main:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
    width: 100%;
    height: 100%;
    opacity: 0.2;
    z-index: -1;
}

Dans ce CSS :

• #main:after crée un pseudo-élément qui sera le transparent calque.
• position : absolue place le calque sur l'élément principal.
• opacité : 0,2 définit l'opacité du calque à 20 %.
• z-index : -1 garantit que le calque se trouve derrière le contenu de l'élément principal.

En combinant ces techniques CSS, vous pouvez créer des images d'arrière-plan transparentes avec des contrôle de l'opacité.

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!