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>

文字框重叠图片

1 个答案: