Прошу дать совет, кто сможет помочь. Есть вот такая картинка, она должна быть фоном на первой странице лендинга. На заднем плане есть картинка и поверх неё, как видно, есть 3 блока с разными цветами. Как правильно и адаптивно сделать такую страницу? Стоит ли задавать эти 3 блока как div и каждому выставлять свои width, height, display: inline-block и оборачивать в ещё один div с свойством display: block? Но тогда без position: absolute каждому из 3-х div не обойтись, а тут уже и не получается адаптивно. Потому, как всё же правильно можно сделать это?
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>
.all{position:absolute/fix; top:0%; height:100%; width:33.33%} #left{left:0%;} #center{left:calc(50vw - (33.33% / 2)} #right{right:0%}
flex
не угодил?flex
flex
?