Une seule propriété CSS peut-elle définir à la fois l'image d'arrière-plan et l'opacité ?

Définition de l'image d'arrière-plan et de l'opacité dans une seule propriété

Question :

Puis-je définir une image d'arrière-plan transparente à l'aide d'un une seule propriété CSS ? Si oui, comment ?

Problème d'image d'origine :

L'image fournie ("tandem.jpg") est trop lumineuse, vous souhaitez donc réduire son opacité à environ 0,2 tout en conservant son utilisation comme fond image.

Solution :

Bien qu'il n'existe pas de propriété CSS directe qui vous permette de définir simultanément l'image d'arrière-plan et l'opacité, vous pouvez obtenir le résultat souhaité en utilisant ce qui suit technique :

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

Explication :

• Créer un nouvel élément (#main:after) en tant qu'enfant de l'élément principal (#main). Cet élément sera utilisé pour superposer l'image d'arrière-plan.
• Définissez sa position sur absolue afin qu'il puisse être positionné par rapport à son élément parent.
• Utilisez la propriété content pour définir une chaîne vide, rendant efficacement cet élément invisible mais lui permettant de conserver les styles d'arrière-plan.
• Réglez son opacité sur 0,2 pour obtenir le niveau de transparence souhaité pour l'arrière-plan. image.
• Réglez son z-index sur -1 pour garantir qu'il apparaît derrière le contenu de l'élément principal.

Cette technique crée efficacement un calque transparent sur l'élément principal, mettant en valeur l'arrière-plan. image avec l'opacité spécifiée.

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!