應用全寬後未顯示內容：在僞元素之前的元素之前

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>

`