Question

我不是网页设计师，但我自学了基本的CSS和HTML代码来对我的网站进行一些调整（我喜欢尝试）。有时候有些东西不想工作。

这是其中之一。

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

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

我真正想要的是div的背景图像完全由颜色叠加div覆盖。但是其他一切如文本和按钮必须在叠加div上方可见。

您可以在下面找到HTML和CSS代码。即将到来的页面的链接是https://languagelearningmindset.com/coming-soon/（它还没有完成！）

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

Kamila

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

如何使叠加div完全覆盖下面的div？

1 个答案: