html - 如何让一个overlay div完全覆盖下面的div？

Question

我不是网页设计师，但我自学了基本的 CSS 和 HTML 代码来对我的网站进行一些调整(而且我喜欢尝试)。有时有些事情就是不想工作。

这就是其中之一。

我目前正在 Wordpress 中使用 Web 生成器插件并构建即将推出的页面。我注意到我无法在 Web 构建器本身中进行颜色叠加，因此我尝试在 CSS 中进行。

overlay div 是可见的。但是，它并没有完全覆盖下面的 div。

我真正想要的是 div 的背景图像完全被颜色覆盖的 div 覆盖。但是文本和按钮等其他所有内容都必须在覆盖 div 上方可见。

您可以在下面找到 HTML 和 CSS 代码。即将推出页面的链接是 https://languagelearningmindset.com/coming-soon/ (还没完呢!)

您能否看一下页面和代码并告诉我可以使用哪些并简要解释为什么这不起作用？

卡米拉

div.vc_row.wpb_row.vc_row-fluid.headerCS.vc_custom_1528536749277.vc_row-has-fill.vc_row-no-padding.vc_row-o-full-height.vc_row-o-columns-middle.vc_row-o-equal-height.vc_row-flex {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.headerCS { 
  background-color: #000 !important;
  opacity: 0.8;
  height: 100%;
  z-index: 1;
  width: 100%;	
  position: absolute;
}

[vc_row][vc_column][vc_column_text]
<div class="headerCS">

[/vc_column_text][/vc_column][/vc_row][vc_row full_width="stretch_row_content_no_spaces" full_height="yes" equal_height="yes" css=".vc_custom_1528537770394{background: rgba(53,53,53,0.8) url(https://languagelearningmindset.com/wp-content/uploads/2018/05/desk-girl-hair-6384.jpg?id=36) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;*background-color: rgb(53,53,53) !important;}" el_class="headerCS"][vc_column css=".vc_custom_1528536650667{background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}"][cz_gap height="30px" id="cz_20709"][cz_gap height="70px" id="cz_87042"][cz_gap height="70px" id="cz_40121"][vc_column_text]
<p style="text-align: center; font-size: 50px; color: #fff;"><strong>AWESOME STUFF COMING SOON</strong></p>
<p style="text-align: center; color: #fff;">We don't know when. Follow along and stay tuned.</p>
[/vc_column_text][cz_social_icons position="tac" id="cz_40817" social="%5B%7B%22icon%22%3A%22fa%20fa-instagram%22%2C%22title%22%3A%22Instagram%22%2C%22link%22%3A%22www.instagram.com%2Fkamilatekin%22%7D%2C%7B%22icon%22%3A%22fa%20fa-twitter%22%2C%22title%22%3A%22Twitter%22%2C%22link%22%3A%22www.twitter.com%2Fkamilatekin%22%7D%5D" sk_con="background-color:rgba(255,255,255,0.01);" cz_social_icons="" sk_icons="font-size:25px;color:#ffffff;text-align:center;" sk_hover="color:#ffbb00;background-color:rgba(255,187,0,0.01);"][cz_gap height="120px" id="cz_52274" height_mobile="40px"][/vc_column][/vc_row][vc_row][vc_column][/vc_column][/vc_row]

</div>

Answer 1

您需要将 position:absolute 应用于您希望背景覆盖整个视口(viewport)的 div。试试这个代码。

#nifty-full-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
}