如何使用CSS在图片上方定位文本？附代码求助实现登录模块效果

你的现有代码已经实现了居中的基础逻辑，但还需要调整容器定位、图片尺寸和模块样式来匹配目标效果。以下是修正后的完整代码：

修改后的HTML #

<div class="wrapper">
    <img id="background" src="header.png" alt="Background Image">
    <div id="content">
      <div class="SignIn">
        <h1 class="entry-title">Sign In</h1>
        <p>Enter your credentials below</p>
      </div>
  </div>
</div>

修改后的CSS #

/* 容器设置相对定位，作为内部绝对定位元素的基准 */
.wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px; /* 可根据需求调整最大宽度 */
  height: 400px; /* 设定图片容器高度，匹配背景图比例 */
  overflow: hidden;
}

/* 背景图片铺满容器 */
#background {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
}

h1.entry-title {
  font-weight: 600; /* 修正原font属性的错误写法 */
  text-align: center;
  color: #fff; /* 白色文字适配深色背景 */
  margin: 0 0 12px;
}

.SignIn p {
  text-align: center;
  color: rgba(255,255,255,0.8); /* 半透明白色增强层次感 */
  margin: 0;
}

.SignIn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.6); /* 半透明黑色背景突出文本 */
  padding: 32px 48px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* 添加阴影增强立体感 */
}

关键调整说明 #

• 给.wrapper添加position: relative，确保.SignIn的绝对定位是相对于背景图片容器，而不是整个页面
• 使用object-fit: cover让背景图片按比例铺满容器，避免拉伸变形
• 修正font: weight 600的错误写法为font-weight: 600
• 给登录模块添加半透明背景、内边距、圆角和阴影，匹配目标效果的视觉层次
• 调整文本颜色为白色/半透明白色，确保在背景图片上清晰可读

内容的提问来源于stack exchange，提问作者snsnzjkt