Comment modifier l'opacité d'une image d'arrière-plan sans affecter les éléments enfants?

Question

J'essaie de rendre l'image de fond à 70% d'opacité sans affecter le texte devant (dans la même div).

---

HTML

#home { 
 
    opacity: 0.7; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-image: url("..."); 
 
    min-height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
div .welcome { 
 
    background-size: cover; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    font-family: 'Lobster', cursive; 
 
    font-weight: 900; 
 
    font-size: 60px; 
 
    color: black; 
 
    margin: auto; 
 
}

<div id="home" class="section"> 
 
      <p class="welcome"><strong>Hello,<br>My name is Sean</strong></p> 
 
      </div>

Answer 1

En utilisant un élément pseudo et position:absolute

Notez que la élément qui est un enfant direct de la home aura besoin d'une position, comme je l'ai mis au content, ou vous devez mettre z-index: -1 sur l'élément pseudo, et sinon, le pseudo sera en couches sur le dessus

body { 
 
    background: blue 
 
} 
 
#home { 
 
    position: relative; 
 
    min-height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
#home::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    opacity: 0.5; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-image: url(http://placehold.it/200/f00); /* image is red but blue shine 
 
                  through so becomes purple */ 
 
} 
 

 
.content { 
 
    position: relative; 
 
    color: white; 
 
}

<div id="home"> 
 

 
    <div class="content"> 
 
    
 
    Content not affected 
 
    
 
    </div> 
 
    
 
</div>