Как сделать так, чтобы накладываемый div полностью покрывал div? - PullRequest
Новая
       45

Как сделать так, чтобы накладываемый div полностью покрывал div?

0 голосов
/ 10 июня 2018

Я не веб-дизайнер, но я научил себя основным кодам CSS и HTML, чтобы внести некоторые коррективы в свой веб-сайт (и мне нравится экспериментировать).Иногда есть вещи, которые просто не хотят работать.

Это одна из тех вещей.

В настоящее время я использую плагин для веб-компоновщика в Wordpress и создаю ближайшую страницу.Я заметил, что не могу сделать наложение цветов в самом веб-конструкторе, поэтому я попытался сделать это в CSS.

Наложение 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>

1 Ответ

0 голосов
/ 10 июня 2018

Вам необходимо применить position:absolute к элементу div, для которого вы хотите иметь фон, покрывающий весь видовой экран.Попробуйте этот код. 

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