Блог

Главная - Вопросы по программированию - Как использовать отрицательное поле в адаптивном дизайне?

Как использовать отрицательное поле в адаптивном дизайне?

#html #css #sass

#HTML #css #sass

Вопрос:

Я пытаюсь создать элемент с фиксированным фоновым изображением, в котором есть элемент, который затем помещается поверх фонового изображения с использованием отрицательного поля.

Я пытаюсь найти наилучший способ установить высоту billboard__image , зная, что она будет динамической в зависимости от ширины браузера, а затем использовать отрицательное заполнение billboard_content , чтобы эти элементы перемещались вверх по фоновому изображению.

Я также использую bootstrap 4.3.1:

 .section {
  clear: both;
  width: 100%;
  padding: 50px 0;
}
.billboard {
  padding: 0 !important;
}
.billboard__image {
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  width: 100%;
}

.billboard__image::after {
  content: "";
  padding-top: 33.3333333333%;
  display: block;
}

.billboard__image--fixed {
  background-attachment: fixed;
}

.billboard__content {
  background: #fff;
  padding: 100px;
  margin: -50% 0 0 0;
  position: relative;
}

.billboard__content--video {
  padding: 0 !important;
  background: transparent !important;
  text-align: center;
}

.billboard__content--video h3 {
  color: #fff;
  text-shadow: 5px 5px 10px black;
}

.billboard__content--video .embed-responsive {
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.65);
  background: #fff;
}  
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section billboard">
  <div class="billboard__image billboard__image--fixed" style="background-image:url('https://www.rollingstone.com/wp-content/uploads/2018/06/fleetwood-mac-new-lineup-first-picture-2018-77e1da91-6a10-46d3-8b48-a203c150139c.jpg?resize=1800,1200amp;w=1200')">
  </div>
  <div class="container">
    <div class="billboard__content billboard__content--video">
      <h3>Fleetwood Mac</h3>
      <div class="embed-responsive embed-responsive-16by9 video">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/wLSUDSNqLgQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
      </div>
    </div>
  </div>
</section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>

Вот мой пример в скрипичном коде: https://jsfiddle.net/zeropsi/Lkbhs41x /.

Есть мысли о том, как наилучшим образом адаптировать поле содержимого в отрицательном пространстве, не перемещаясь над фоновым изображением?

Редактировать: Вот изображение того, чего я пытаюсь достичь: введите описание изображения здесь

Комментарии:

1. можете ли вы сделать эскиз желаемого дизайна. Мне трудно представить, как вы хотите, чтобы это выглядело

2. Можете ли вы добавить изображение того, чего вы пытаетесь достичь? Кроме того, отрицательное заполнение не существует.

3. @tacoshy да — я создам изображение очень быстро.

4. @disinfor — извините, я забежал вперед, я имел в виду отрицательные поля.

5. @tacoshy — если вы запустите приведенный выше фрагмент кода в полноэкранном режиме, вы должны увидеть, о чем я говорю. В полноэкранном режиме макет выглядит так, как и ожидалось, но как только вы уменьшите экран, вы увидите, как видео начинает перемещаться над фоновым изображением.