Блог

Главная - Вопросы по программированию - Текст не перекрывает изображение и перемещается вверх при изменении размера браузера

Текст не перекрывает изображение и перемещается вверх при изменении размера браузера

#html #css #position #text-alignment

#HTML #css #положение #выравнивание текста

Вопрос:

Я пытаюсь сделать так, чтобы текст внутри перекрывал изображение внутри ссылки. Проблема в том, что я пытался использовать top . Это работает, но если я попытаюсь изменить размер браузера, он переместится вверх и не останется в середине изображения.

     .background1 {
      padding: 40px 20px;
      max-width: 500px;
      margin: 20px;
      transition: 0.5s;
    }

    .background1 a {
      text-decoration: none;
      color: white;
    }

    .background1 a .overlay h2 {
      position: relative;
      text-align: center;
    }

    .background1 img {
      width: 100%;
      border: 3px solid grey;
      transition: 0.5s;
    }

   .overlay{
     color: white;
     text-shadow: 0 2px 4px black;
    }  
   <div class="content">
    <div class="background1">
      <a href="#">
        <img src="icon1.jpg"></a>
      <div class="overlay">
        <h2>Web Design</h2>
      </div>
      </a>
    </div>
    <div class="background1">
      <a href="#">
        <img src="icon2.jpg"></a>
      <div class="overlay">
        <h2>JAVA</h2>
      </div>
      </a>
    </div>
    <div class="background1">
      <a href="#">
        <img src="icon3.jpg"></a>
      <div class="overlay">
        <h2>CSS</h2>
      </div>
      </a>
    </div>
    <div class="background1">
      <a href="#">
        <img src="icon4.jpg"></a>
      <div class="overlay">
        <h2>HTML</h2>
      </div>
      </a>
    </div>
</div>

Если я оставлю это так. Текст h2 будет находиться в нижней части изображения по центру.
Если я добавлю top: -120px; , текст перейдет в середину изображения. Однако, когда я пытаюсь изменить размер, чтобы посмотреть, как он будет выглядеть на мобильном телефоне, он начинает перемещаться вверх от изображения.

Как я могу это исправить? Кроме того, я хотел бы сохранить его в css. Я все еще учусь, поэтому я не хочу углубляться в какие-то странные функции или кодирование.

Ответ №1:

Я думаю, что-то вроде этого — это то, что вы хотите. Вам нужно поместить наложение внутри привязки и расположить его абсолютно так, чтобы оно полностью закрывало изображение. Затем вы центрируете текст внутри этого наложения. При изменении размера окна просмотра текст останется посередине, но, конечно, он станет больше по сравнению с изображением. (При необходимости это можно настроить с помощью медиа-запросов).

 * {
  box-sizing: border-box;
}

.content {
  display: flex;
  flex-wrap: wrap;
  background: blanchedalmond;
}

.background1 {
  width: 40%;
  background: oldlace;
  margin: 10px;
}

.background1 a {
  text-decoration: none;
  color: white;
  padding: 40px;
}

.anchor {
  border: 3px solid grey;
  position: relative;
  display: inline-block;
  text-align: center;
  box-shadow: -2px 2px 5px 2px rgba(0, 0, 0, 0.2);
}

img {
  width: 100%;
  vertical-align: middle;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
}

h2 {
  margin: auto;
}  
 <div class="content">
  <div class="background1">
    <a class="anchor" href="#">
      <img src="https://i.guim.co.uk/img/media/a1e119a48076615b6502ceccd369bc72bcf5d93a/0_374_5616_3370/master/5616.jpg?width=1200amp;height=1200amp;quality=85amp;auto=formatamp;fit=cropamp;s=68a05c30b5154497160d38f176556727">
      <div class="overlay">
        <h2>Web Design</h2>
      </div>
    </a>
  </div>
  <div class="background1">
    <a class="anchor" href="#">
      <img src="https://i.guim.co.uk/img/media/a1e119a48076615b6502ceccd369bc72bcf5d93a/0_374_5616_3370/master/5616.jpg?width=1200amp;height=1200amp;quality=85amp;auto=formatamp;fit=cropamp;s=68a05c30b5154497160d38f176556727">
      <div class="overlay">
        <h2>JAVA</h2>
      </div>
    </a>
  </div>
  <div class="background1">
    <a class="anchor" href="#">
      <img src="https://i.guim.co.uk/img/media/a1e119a48076615b6502ceccd369bc72bcf5d93a/0_374_5616_3370/master/5616.jpg?width=1200amp;height=1200amp;quality=85amp;auto=formatamp;fit=cropamp;s=68a05c30b5154497160d38f176556727">
      <div class="overlay">
        <h2>CSS</h2>
      </div>
    </a>
  </div>
  <div class="background1">
    <a class="anchor" href="#">
      <img src="https://i.guim.co.uk/img/media/a1e119a48076615b6502ceccd369bc72bcf5d93a/0_374_5616_3370/master/5616.jpg?width=1200amp;height=1200amp;quality=85amp;auto=formatamp;fit=cropamp;s=68a05c30b5154497160d38f176556727">
      <div class="overlay">
        <h2>HTML</h2>
      </div>
    </a>
  </div>
</div>

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

1. У меня это не работает. Все становится беспорядочным. Проблема в том, что я не добавил больше кодов, которые у меня есть внутри html. Рядом с фоном 1 есть еще четыре изображения по горизонтали.

2. Тогда вам, вероятно, нужно добавить их к вопросу. Я так понимаю, приведенный выше фрагмент действительно работает на вашем компьютере?

3. да, я добавил класс ‘anchor’, который нужно было поместить в теги привязки. Должно быть прямо сейчас. Также добавил немного теней для собственного развлечения.

4. Святая корова, давай дружить! Это красиво и отлично работает!

5. Рад это слышать. 🙂