0

Прошу дать совет, кто сможет помочь. Есть вот такая картинка, она должна быть фоном на первой странице лендинга. На заднем плане есть картинка и поверх неё, как видно, есть 3 блока с разными цветами. Как правильно и адаптивно сделать такую страницу? Стоит ли задавать эти 3 блока как div и каждому выставлять свои width, height, display: inline-block и оборачивать в ещё один div с свойством display: block? Но тогда без position: absolute каждому из 3-х div не обойтись, а тут уже и не получается адаптивно. Потому, как всё же правильно можно сделать это?Сама картинка страницы

4
  • а в чем собственно проблема? .all{position:absolute/fix; top:0%; height:100%; width:33.33%} #left{left:0%;} #center{left:calc(50vw - (33.33% / 2)} #right{right:0%} Commented 20 апр. 2022 в 17:39
  • А чем flex не угодил? Commented 20 апр. 2022 в 17:40
  • ну или действительно flex Commented 20 апр. 2022 в 17:41
  • Тем более, если нужен адаптив. На мобильном экране таким блокам следует уйти друг под друга. Ну как же тут без flex? Commented 20 апр. 2022 в 17:44

1 ответ 1

1

Если триколор - это фон, то через градиент.

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  height: 100%;
}

#root {
  height: 100%;
  background: linear-gradient(to right, rgba(93, 6, 25, .7) 33.333%, rgba(10, 52, 95, .7) 33.333%, rgba(10, 52, 95, .7) 66.667%, rgba(12, 124, 149, .7) 66.667%), url(https://i.picsum.photos/id/173/1024/768.jpg?hmac=JfkU03GjuBQ3-88RJE5LL3Wu-76U6474M7cpz-fnvEE) no-repeat center / cover;
}
<div id="root"></div>

Если речь идет именно о трех блоках, у каждого из которых свой цвет, то так:

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  height: 100%;
}

#root {
  height: 100%;
  background: url(https://i.picsum.photos/id/173/1024/768.jpg?hmac=JfkU03GjuBQ3-88RJE5LL3Wu-76U6474M7cpz-fnvEE) no-repeat center / cover;
  display: flex;
}

.block {
  flex: 1 1 auto;
}

.block:nth-child(1) {
  background: rgba(93, 6, 25, .7);
}

.block:nth-child(2) {
  background: rgba(10, 52, 95, .7);
}

.block:nth-child(3) {
  background: rgba(12, 124, 149, .7);
}
<div id="root">
  <div class="block">block 1</div>
  <div class="block">block 2</div>
  <div class="block">block 3</div>
</div>

1
  • Большое спасибо!
    – Andrey
    Commented 23 апр. 2022 в 18:58

Ваш ответ

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

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