将img放入div容器后图片消失，如何实现多层背景适配效果

问题原因及修复方案 #

1 核心异常点排查 #

• 路径拼写错误：Background1引用的资源路径为/assets/（带s），Background2引用的资源路径为/asset/（无s），拼写不一致会导致资源404加载失败
• ID重复违规：两个元素ID均设置为Background，HTML规范要求ID全局唯一，会导致样式渲染异常
• 高度规则失效：Background1设置了height:100%，如果它的上层父元素（html、body）未设置明确高度，百分比高度会失效，绝对定位的子元素会丢失参照容器
• content属性兼容性问题：content属性原生仅支持伪元素::before/::after，直接给普通div添加会导致部分浏览器不识别，背景图加载异常

2 修复后代码 #

CSS代码

/* 初始化根元素高度，确保百分比规则生效 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
.Background1{
    position: relative;
    height: 100%;
    width: 100%;
    /* 替换content为background-image，解决兼容性问题 */
    background-image: url("/assets/backgroundlayer1.jpg");
    background-size: cover;
    background-position: center;
}
.Background2{
    position: absolute;
    top: 35%;
    left: 25%;
    height: 75%;
    width: 50%;
    /* 确保图片不变形适配容器，且层级高于父元素背景 */
    object-fit: contain;
    z-index: 10;
}

HTML代码

<div class="Background1" name="Background1" id="Background1">
 <img class="Background2" name="Background2" id="Background2" src="/assets/Background2.png" alt="第二层背景">
</div>

3 后续验证步骤 #

• 确认两张图片的存放路径、文件名、大小写完全匹配代码中的引用值，多数部署环境对静态资源路径大小写敏感
• 按F12打开浏览器控制台，切换到「网络」面板刷新页面，查看两张图片的请求状态，404报错直接对应修正路径即可

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