如何用::after在background-image上方添加矩形？表单复刻问题求助

以下是针对你问题的具体排查和解决步骤：

• 必须设置content属性：伪元素::after/::before的显示前提是定义content: ""（哪怕是空内容），这是你当前伪元素尺寸异常的核心原因之一，很多人会忽略这个基础规则。
• 给父元素设置定位基准：给form-container添加position: relative，这样伪元素的绝对定位才有参考坐标，能准确覆盖在背景图上方。
• 修正伪元素的显示模式与尺寸：伪元素默认是inline元素，宽度无法生效，需设置display: block或display: inline-block，再明确指定width和height（比如width: 100%; height: 100%实现全屏覆盖，或固定像素值）。
• 层级与可见性排查：
  • 用z-index: 1确保伪元素在背景图上方（父元素无自定义z-index时，伪元素默认层级已高于父元素背景，但显式设置更稳妥）；
  • 检查伪元素的background-color是否与父元素背景色一致，导致视觉上不可见；
  • 确认父元素没有设置overflow: hidden，避免伪元素被裁剪。

给你一个可直接参考的代码示例：

.form-container {
  position: relative; /* 定位基准 */
  background-image: url('你的背景图路径');
  background-size: cover;
  width: 400px;
  height: 500px;
}

.form-container::after {
  content: ""; /* 伪元素显示必需 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* 半透明矩形，可按需调整颜色/透明度 */
  z-index: 1;
  display: block;
}

如果需要的是固定尺寸的矩形而非全屏覆盖，只需将width和height改成目标像素值，再通过top/left调整位置即可。

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