Расположение кнопки адаптивного героя, когда изображение героя содержит текст - PullRequest
Новая
       14

Расположение кнопки адаптивного героя, когда изображение героя содержит текст

0 голосов
/ 24 сентября 2018

Я привык создавать изображение героя в качестве фонового изображения и накладывать кнопку героя сверху как относительный / встроенный компонент.

Сегодня мне дали изображение героя с текстом (см. Ниже).Кнопка героя должна находиться под текстом, который гласит: «Проверьте обзор открытой регистрации ...».Но происходят две вещи: 1. когда я позиционирую кнопку, как обычно, кнопка не остается под этим текстом, когда я уменьшаю длину моего экрана.2. кнопка не будет располагаться сверху изображения героя, а вместо этого будет лежать под нижней частью изображения и не будет сверху.

Hero banner

<!-- Hero Image-->
  <div id="banner" class="row">
     <div class="col-xs-12">
        <img src="../img/headers/bannerHome_OpenEnrollment.png" class="img-responsive" alt="open enrollment" tabindex="0">
<!-- Hero Button -->
        <div class="hero-text">
              <button class="btn btn-secondary hero-text">Learn More <img src="../img/icons/btnArrow_white.png"></button>
        </div>
      </div>
  </div>
#banner .col-xs-12 {
    padding-left: 0;
    padding-right: 0;
    background-color: #49c8f4;
    position: relative;
}
.img-responsive {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.hero-text button {
  border: none;
  position: absolute;
  margin-left: 150px;
  margin-bottom: 150px;
  outline: 0;
  display: inline-block;
  color: white;
  background-color: #003057;
  font-size: 24px;
  font-family: "Klinic Slab Medium";
  cursor:pointer;
}

1 Ответ

0 голосов
/ 24 сентября 2018

Не рекомендуется вставлять текст в изображение.Желательно, чтобы вы строили текстовые разделы в формате HTML.Это позволило бы им располагаться относительно друг друга.

...