Transparence de l'image d'arrière-plan dans DIV

Question

J'essaie de rendre une image d'arrière-plan transparente (pas d'option pour faire une image PNG transparente ou plus claire, les images sont souvent changées).

background: url(image.jpg) no-repeat center center/cover; 
opacity: 0.2; 

L'image fonctionne, mais tout ce qui est dans la DIV est également transparent. J'ai cherché une solution, mais je n'arrive pas à appliquer la bonne solution. Un pointeur sur la façon de résoudre ce problème?

Answer 1

Utilisez l'opacité sur le div de fond à l'intérieur de l'élément d'emballage.

.page { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.page::before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url('http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg'); 
 
    opacity: 0.2; 
 
    z-index: -1; 
 
} 
 
.box { 
 
    display: inline; 
 
    background: red; 
 
}

<div class="page"> 
 
    My page 
 
    <div class="box">Red box</div> 
 
</div>

Answer 2

Vous pouvez utiliser CSS linear-gradient() avec rgba().

div { 
 
    width: 300px; 
 
    height: 200px; 
 
    background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg"); 
 
} 
 
span { 
 
    background: black; 
 
    color: white; 
 
}

<div><span>Hello world.</span></div>

jsFiddle

Explication:

• La première partie: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) crée une couleur de fond blanc semi-transparent. Vous pouvez modifier le paramètre alpha selon les besoins entre 0 (entièrement transparent) et 1 (entièrement opaque).

• La deuxième partie: url("https://i.imgur.com/xnh5x47.jpg") consiste à afficher l'image d'arrière-plan réel. Ensemble: background: linear-gradient(...), url(...); crée plusieurs arrière-plans, deux d'entre eux sont empilés, le premier couvre la seconde.

Answer 3

Vous pouvez utiliser un pseudo élém

div { 
 
     width: 300px; 
 
     height: 200px; 
 
     color: green; 
 
     position: relative; 
 
    } 
 

 
    div:before{ 
 
     background: url(https://i.imgur.com/xnh5x47.jpg); 
 
     content: ""; 
 
     z-index: -1; 
 
     position: absolute; 
 
     opacity: 0.5; 
 
     top: 0; bottom: 0; left: 0; right: 0; 
 
     background-size: cover; 
 
    }

<div> LOLOLOL </div>