Как правильно разместить в одном блоке 2 фона?

Question

Не знаю насколько корректен мой вопрос, но в данном случае у меня переход с картинки на фон, при этом действие происходит в одном и том же блоке, как лучше сделать такую штуку и при этом ее адаптировать как-то, ведь как я понял, видимо придется с position absolute иметь дело. если можно, то с кодом, ибо не совсем понятен концепт как это реализовывать. Заранее спасибо <3

Answer 1

Пример

body {
  margin: 0;
}

video {
  display: block;
  width: 100%;
}

video::-webkit-media-controls-panel {
  background-image: linear-gradient(transparent, transparent) !important;
}

video::-webkit-media-controls {
  padding-bottom: 3rem;
}

.section-1 {
  position: relative;
}

.section-1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .4) 70%, rgba(0, 0, 0, 1) 100%);
  pointer-events: none;
}

.section-2 {
  background-color: #000;
  min-height: 100vh;
}

<section class="section-1">
  <video controls>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
</section>
<section class="section-2"></section>

БЛОГ НА HUSL

Как правильно разместить в одном блоке 2 фона?

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