Пол дня бьюсь.. Не могу задать linear-gradient
родителю, тогда как у дочерних элементов (main-block__container
) он работает. z-index
не работает для main-block
html
.wrapper {
min-height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
._container {
max-width: 107rem;
box-sizing: content-box;
padding: 0 1.5rem;
margin: 0 auto;
}
._container__narrow {
max-width: 80rem;
box-sizing: content-box;
padding: 0 1.5rem;
margin: 0 auto;
}
.page {
flex: 1 1 auto;
}
._bgimg {
position: relative;
}
._bgimg img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: cover;
}
.main-block {
position: relative;
background-image: linear-gradient(180deg, #242633 11.98%, rgba(45, 52, 60, 0.38) 51.04%, #242B33 92.19%);
}
.main-block__container {
position: relative;
z-index: 2;
padding: 29.6rem 0 7.4rem;
}
.main-block__img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.main-block__title {
font-size: 4.8rem;
line-height: 133.3333333333%;
margin: 0 0 10rem;
}
.main-block__icon {
margin: 0 auto;
margin-bottom: 20rem;
}
.main-block__contacts {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.main-block__contact {
font-size: 1.8rem;
line-height: 116.6666666667%;
padding: 0 0 0 3rem;
}
.main-block__contact:first-child {
background: url("../img/icons/place.svg") left center no-repeat;
}
.main-block__contact:last-child {
background: url("../img/icons/tel.svg") left center no-repeat;
}
<section class="main-block">
<div class="main-block__container _container__narrow">
<h1 class="main-block__title title">blablablalblabla</h1>
<img src="img/icons/mouse.svg" alt="scroll" class="main-block__icon">
<ul class="main-block__contacts">
<li class="main-block__contact"><a href="#map" class="main-block__link">addr</a></li>
<li class="main-block__contact"><a href="tel:" class="main-block__link">1 (123) 123-45-67</a></li>
</ul>
</div>
<div class="main-block__img _bgimg">
<img src="img/main-background.jpg" alt="bgbgbf">
</div>
</section>