Как правильно задать стили CSS для трёх одинаковых элементов поверх фоновой картинки?

Question

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

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

БЛОГ НА HUSL

Как правильно задать стили CSS для трёх одинаковых элементов поверх фоновой картинки?

Ответы (1 шт):