Inhalt nicht nach dem Anwenden einer vollen Breite: vor Pseudo auf einem Element darunter

Question

Ich habe ein Beispiel für ein Problem erstellt, das ich in CodePen habe, wo ich etwas Text habe, den ich versuche, leichter gegen den Hintergrund zu lesen ist eingeschaltet; das Hintergrundbild wird mit background-image eingestellt und Sie können daher keine Deckkraft direkt darauf anwenden (AFAIK), also habe ich versucht, eine Hintergrundfarbe voller Breite darüber zu legen und die Deckkraft so einzustellen, dass der Hintergrund dunkler wird - dies hat jedoch den Inhalt verursacht das ist oben drauf, um zu verschwinden.

CodePen:http://codepen.io/gutterboy/pen/GqGgmG(die .bg:before deaktivieren, den Inhalt zu sehen)

HTML:

<div class="bg"> 
    <div class="container"> 
    <ul class="left"> 
     <li>something here</li> 
     <li>something here</li> 
     <li>something here</li> 
     <li>something here</li> 
    </ul> 
    <ul class="right"> 
     <li>something here</li> 
     <li>something here</li> 
     <li>something here</li> 
     <li>something here</li> 
    </ul> 
    </div> 
</div> 

CSS:

.bg { 
    width: 100%; 
    background: #20334c url("some_image.jpg") center center no-repeat; 
    background-size: cover; 
    height: 550px; 
    overflow: hidden; 
    position: relative; 
} 

.bg:before { 
    display: block; 
    content: ''; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.5); 
} 

.container { 
    width: 960px; 
    margin: 0 auto; 
    position: relative; 
} 

ul { 
    position: absolute; 
    top: 75px; 
    font-size: 2em; 
    font-weight: bold; 
    z-index: 9999; 
    color: #fff; 
} 

ul.left { 
    left: 50px; 
} 

ul.right { 
    right: 50px; 
} 

Warum wendet man ein Pseudo :before Element auf die .bg Klasse an, die Inhalte versteckt, die darüber liegen?

Answer 1

Das Element :before verschiebt den restlichen Text nach unten, da ihm display: block zugewiesen wurde. Sie müssen Ihre :before aus dem Fluss nehmen, indem Sie position auf absolute setzen. Dies ermöglicht es dem Text und der :before sich überlappen zu können.

.bg { 
 
    width: 100%; 
 
    background: #20334c url("https://helpx.adobe.com/content/dam/help/en/photoshop/how-to/remove-subject_1408x792.jpg") center center no-repeat; 
 
    background-size: cover; 
 
    height: 550px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.bg:before { 
 
    display: block; 
 
    content: ''; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    background-color: rgba(0,0,0,0.8); 
 
} 
 

 
.container { 
 
    width: 960px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
ul { 
 
    position: absolute; 
 
    top: 75px; 
 
    font-size: 2em; 
 
    font-weight: bold; 
 
    z-index: 9999; 
 
    color: #fff; 
 
} 
 

 
ul.left { 
 
    left: 50px; 
 
} 
 

 
ul.right { 
 
    right: 50px; 
 
}

<div class="bg"> 
 
    <div class="container"> 
 
    <ul class="left"> 
 
     <li>something here</li> 
 
     <li>something here</li> 
 
     <li>something here</li> 
 
     <li>something here</li> 
 
    </ul> 
 
    <ul class="right"> 
 
     <li>something here</li> 
 
     <li>something here</li> 
 
     <li>something here</li> 
 
     <li>something here</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

Veränderung es nach

.bg { 
 
    width: 100%; 
 
    background: #20334c url("https://helpx.adobe.com/content/dam/help/en/photoshop/how-to/remove-subject_1408x792.jpg") center center no-repeat; 
 
    background-size: cover; 
 
    height: 550px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.bg:after { 
 
    display: block; 
 
    content: ''; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgba(0,0,0,0.5); 
 
} 
 

 
.container { 
 
    width: 960px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
ul { 
 
    position: absolute; 
 
    top: 75px; 
 
    font-size: 2em; 
 
    font-weight: bold; 
 
    z-index: 9999; 
 
    color: #fff; 
 
} 
 

 
ul.left { 
 
    left: 50px; 
 
} 
 

 
ul.right { 
 
    right: 50px; 
 
}

<div class="bg"> 
 
    <div class="container"> 
 
    <ul class="left"> 
 
     <li>something here</li> 
 
     <li>something here</li> 
 
     <li>something here</li> 
 
     <li>something here</li> 
 
    </ul> 
 
    <ul class="right"> 
 
     <li>something here</li> 
 
     <li>something here</li> 
 
     <li>something here</li> 
 
     <li>something here</li> 
 
    </ul> 
 
    </div> 
 
</div>

`