комбинация из нескольких изображений для показа содержимого блока - PullRequest
Новая
       46

комбинация из нескольких изображений для показа содержимого блока

0 голосов
/ 14 февраля 2020

Я пытаюсь сделать solid разметку и стиль для следующего макета XD

enter image description here

Я добавил bootstrap для всего проекта, но Меня смущает, как я пишу разметку и стиль для этого макета, помня об отзывчивости! 

.hb-block-content-part {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url("../images/bg-two.png");
  background-size: cover;
  background-position: center center;
}

.hb-block-content-part::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 100%, rgba(0, 0, 0, 0) 100%);
}

.left-image {
  position: relative;
}

.left-image .l-main-image {
  float: right;
  position: relative;
  margin-left: 30%;
  margin-top: 10%;
  z-index: 2;
}

.left-image .l-overlay-image {
  position: absolute;
  left: -20%;
  top: 20%;
  z-index: 3;
}

.left-image .l-yellow-image {
  position: absolute;
  left: 10%;
  top: 0;
  z-index: 1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="hb-block-content-part">
  <div class="container-fluid px-10-percent">
    <div class="hb-block-content">
      <div class="left-image">
        <div class="l-main-image">
          <img class="img-fluid" src="https://i.imgur.com/JQl8Uyb.jpg" alt="">
        </div>
        <div class="l-overlay-image">
          <img class="img-fluid" src="https://i.imgur.com/gBJ6kwB.jpg" alt="">
        </div>
        <div class="l-yellow-image">
          <img class="img-fluid" src="https://i.imgur.com/rfk6tzn.jpg" alt="">
        </div>
      </div>
      <div class="right-content">

      </div>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 14 февраля 2020

Можете ли вы предоставить мобильную версию этого дизайна?
Bootstrap 4 имеет классы для позиций и сеток, обязательно проверьте документацию здесь: https://getbootstrap.com/docs/4.4/layout/overview/

Вам следует работать с flexbox или grid для лучшего результата с отзывчивым макеты.
См. ссылки ниже:

Сетка:
https://css-tricks.com/snippets/css/complete-guide-grid/

Flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

...