CSS peut-il combiner l'image d'arrière-plan et l'opacité dans une seule propriété ?

Les images d'arrière-plan et l'opacité peuvent-elles être définies dans une seule propriété ?

CSS vous permet de définir séparément la transparence et les images d'arrière-plan, mais comment faire obtenez-vous une image de fond transparente ?

Exemple Scénario :

Considérez une image qui serait visuellement écrasante comme arrière-plan si elle était utilisée avec une opacité totale. Vous souhaitez réduire son opacité à environ 0,2 pour un effet plus subtil.

Approche traditionnelle :

L'utilisation de la propriété background-image seule n'ajustera pas la transparence de l'image. .

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

Solution : pseudo-élément Hack

Pour créer une image de fond transparente, utilisez un pseudo-élément :

#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 :

• Le :after pseudo-element crée un nouvel élément dans le #main div.
• Il n'a pas de contenu (content : ""), donc ce n'est pas visuellement apparent.
• Il est positionné de manière absolue en haut à gauche de #main et couvre toute sa surface.
• L'opacité réduite de 0,2 rend l'image de fond transparente.
• Le z-index de -1 place l'image derrière le contenu dans #main.

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!