如何设置div仅显示SVG内容其余透明以实现多层SVG叠加？

你的实现思路本身没有问题，设计师导出两个独立SVG的方案也是完全可行的，div默认未设置背景色时，除背景内容外的区域本身就是透明的，不需要额外做特殊处理。你遇到的显示问题是代码里的几个错误配置导致的：

• 最直接的问题：上层人物所在的#landing_left-and-banner设置了opacity: 0，这会让整个div完全透明，自然看不到内容，首先删掉这行配置。
• 第二个错误：#landing_left-and-banner里设置了background-color: $uxui-dg，这个变量是你中间层的灰色背景色，给上层div加了这个属性后，整个div的背景都是灰色，会完全盖住下层的内容，删掉这行即可，div无背景色时默认完全透明，只会显示你设置的SVG背景图。
• 第三个冗余配置：两个div都加了landing_bg-svg-div类，这个类自带middleLayer的背景图，虽然ID选择器优先级更高，上层div的背景图会被单独设置的人物SVG覆盖，但属于无效冗余代码，建议给两个层分别设置单独ID，分开配置背景图。
• 第四个布局隐患：绝对定位的父容器没有设置position: relative，你外层的flex父容器未开启相对定位的话，两个绝对定位的子div是相对于整个视口定位的，后续调整位置容易出问题，建议给外层父div加上相对定位，同时设置对应高度避免布局塌陷。

修正后参考代码 #

如果是React项目把示例中的class替换为className即可：

<div class="d-flex justify-content-center position-relative" style="height: 85vh;">
    <!-- 中间层 -->
    <div
        id="landing-middle-layer"
        class="landing_svg-positioning"
    ></div>
    <!-- 上层人物层 -->
    <div
        id="landing-character"
        class="landing_svg-positioning"
    ></div>
</div>

/* 公共定位类 */
.landing_svg-positioning {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    /* 调试时可以加边框看两个层的位置是否对齐，没问题后删掉即可 */
    /* border: 2px solid red; */
}

/* 中间层样式 */
#landing-middle-layer {
    background-image: url("../../images/middleLayer.svg");
    background-size: 90% 90%;
    background-position: 100% 100%;
    z-index: 2;
    /* 中间层需要灰色背景就保留这行，不需要就删掉 */
    background-color: $uxui-dg;
}

/* 上层人物层样式 */
#landing-character {
    background-image: url("../../images/Illustration WEB - man.svg");
    background-size: 70% 70%;
    background-position: center;
    z-index: 100;
}

补充说明 #

SVG本身默认支持透明背景，只要设计师导出SVG时没有额外加背景色，就只会显示图形轮廓部分，不会出现多余的空白背景，完全可以满足你多层堆叠显示的需求。如果修改后仍有显示问题，可以打开浏览器开发者工具，选中上层div元素，检查背景图路径是否正确、资源是否加载成功、样式是否被其他规则覆盖。

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