Comment puis-je créer une image d'arrière-plan transparente avec CSS ?

Superposition d'images transparentes pour les arrière-plans

Dans la conception Web, l'ajout d'images comme arrière-plans améliore l'attrait esthétique. Cependant, les images peuvent parfois être trop lumineuses ou nécessiter des ajustements de transparence. Pouvez-vous combiner les images d'arrière-plan et l'opacité dans une seule propriété CSS ?

Malgré les références qui expliquent séparément les paramètres de transparence de l'image et de l'image d'arrière-plan, il est possible de les combiner pour créer une image d'arrière-plan transparente.

Prenons l'exemple suivant :

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

Ce code définit l'image à l'URL spécifiée comme arrière-plan de l'élément avec l'ID « principal ». Cependant, cela ne permet pas d'ajuster l'opacité.

Pour obtenir une image d'arrière-plan transparente, 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 code :

1. position : relatif est ajouté à l'élément parent (#main) pour permettre un positionnement absolu du pseudo-élément suivant.
2. Un pseudo-élément (#main:after) est créé pour superposer l'image d'arrière-plan.
3. La propriété content est définie sur une chaîne vide pour empêcher tout texte ou contenu d'apparaître à l'intérieur du pseudo-élément.
4. Le le pseudo-élément reçoit un positionnement absolu avec position: Absolute, lui permettant de superposer l'élément parent.
5. La propriété background-image est définie sur la même URL que celle de l'élément #main. background-image, ce qui fait que l'image recouvre l'élément parent.
6. opacité : 0,2 définit le niveau de transparence à 20 %. L'ajustement de cette valeur modifie l'opacité de l'image.
7. z-index : -1 garantit que le pseudo-élément est positionné derrière le contenu de l'élément parent.

En utilisant cette méthode, vous pouvez définir un image d'arrière-plan et contrôlez son opacité, vous permettant de créer des designs visuellement attrayants avec des images transparentes qui ne dominent pas le contenu.

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!