应用全宽后未显示内容：在伪元素之前的元素之前

Question

我已经在CodePen中创建了一个问题的示例，其中有一些文本，我试图使其更容易阅读它的背景打开;使用background-image设置背景图像，因此不能直接对其应用不透明度（AFAIK），所以我尝试在其上放置全宽背景色并设置不透明度以使背景变暗 - 但是这会导致内容这是在它的顶部消失。

CodePen：http://codepen.io/gutterboy/pen/GqGgmG（禁用.bg:before看到的内容）

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

为什么要将:before元素应用于.bg类隐藏的顶级内容？

Answer 1

:before元素将文本的其余部分向下推，因为它已分配为display: block。您需要将:before从position设置为absolute。这将允许文本和:before能够重叠。

.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

将其更改为

后

.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>

`