1

Красная полоска должна быть ЗА изображением, а сейчас она на нём:

https://jsfiddle.net/tm6Lqh3u/

#footer_wrap_bg {
  position: absolute;
  z-index: 1;
  background: url('https://evve.link/fl/images/footer_bg.png') no-repeat;
  width: 100%;
  height: 360px;
}

#footer_wrap_bg_colorizer2 {
  position: absolute;
  z-index: 0;
  background: red;
  width: 100%;
  height: 15px;
  margin-top: 55px;
}
<div id="footer_wrap_bg"></div>
<div id="footer_wrap_bg_colorizer2"></div>

Если же не использовать изображение в background, то всё нормально, красная полоска становится ЗА изображением.

https://jsfiddle.net/tm6Lqh3u/1/

#footer_wrap_bg {
  position: absolute;
  z-index: 1;
  background: green;
  width: 100px;
  height: 360px;
}

#footer_wrap_bg_colorizer2 {
  position: absolute;
  z-index: 0;
  background: red;
  width: 100%;
  height: 15px;
  margin-top: 55px;
}
<div id="footer_wrap_bg"></div>
<div id="footer_wrap_bg_colorizer2"></div>

Как быть?

1
  • @MaximLensky, спасибо огромное! Превратите комментарий в ответ, пожалуйста :)
    – ModaL
    15 янв 2020 в 4:06

2 ответа 2

3

Ваше изображение имеет прозрачность, поэтому и не работает, вернее работает но вы этого не заметили... Попробуйте непрозрачное изображение и увидите эффект. Либо добавьте ему цвет, как подсказывает @MaximLensky

2
  • вот это кстати очень не хорошо что когда обращаешься к пользователю сайта как положено @name а он не видит ...потому что нету его на странице ... 15 янв 2020 в 3:57
  • @MaximLensky, Ну да) 15 янв 2020 в 4:04
1

Так как изображение на фоне имеет прозрачночть то можно либо сменить изображение либо добавить к фону цвет ...как в сниппете

background: url('https://evve.link/fl/images/footer_bg.png') no-repeat,#FFF;

html,
body {
  margin: 0;
  padding: 0;
}

.footer {
  position: relative;
  width: 100%;
  height: 360px;
}

#footer_wrap_bg {
  position: absolute;
  top: 0;
  left: 50%;
  background: url('https://evve.link/fl/images/footer_bg.png') no-repeat, rgba(255, 255, 255, 0.999);
  width: 90%;
  height: inherit;
  transform: translateX(-50%);
  z-index: 1;
}

#footer_wrap_bg_colorizer2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: ;
  background: red;
  width: inherit;
  height: 15px;
  margin-top: 55px;
  z-index: 0;
}
<div class="footer">
  <div id="footer_wrap_bg"></div>
  <div id="footer_wrap_bg_colorizer2"></div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.