Текстовое поле, перекрывающее изображение

Question

Я застрял при создании кода Я хочу, чтобы текстовое поле отображалось в верхней средней части изображения, перекрывая изображение. Может ли тело помочь мне разобраться? Заранее спасибо !!!

---

Answer 1

Вы должны включить свой HTML и CSS в свой пост, так как это поможет другим дать вам указания о том, что вы делаете неправильно. Переполнение стека не является сервисом кодирования. Но в качестве приветственного подарка приведу небольшую демонстрацию того, как этого добиться. Настройте мой код так, как считаете нужным.

.wrapper {
  width: 300px;
  height: auto;
  position: relative;
}

.wrapper img {
  width: 100%;
  height: auto;
}

.wrapper .text-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.wrapper .text-wrapper .text {
  background-color: rgba(250,250,250, .5);
  padding: .5rem 1rem;
  border-radius: .25rem;
  margin-top: .5rem;
}

<div class="wrapper">
  <img src="https://www.thoughtco.com/thmb/2YaYxhHvcDahSwh9mlWp4-ZYYb8=/768x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/GettyImages-482252-001-570a81d93df78c7d9edc0d78.jpg">
  <div class="text-wrapper"><div class="text">your text here</div></div>
</div>