我可以让 div 只显示 svg 图像的内容，否则是透明的，所以我可以将两个 svg 堆叠在一起吗？

Question

我的 ux/ui 设计师（来自 Fiverr）给了我两个 .svg 文件。 .svg 文件对我来说是新的。

我有一个他给我的模拟。模拟显示背景，然后是 .svg 文件的中间层，然后是站在计算机旁的人作为 .svg 文件。

我们称它们为 middleLayer.svg，以及插图 WEB - man.svg

我以前从未这样做过，但我推测可以通过以下方式完成：

• 从文档流中取出两个 div，为每个分配一个 .svg
• 然后将它们与 z-index 值堆叠在一起，同时也
• 使除实际 svg 轮廓本身之外的所有内容都透明。

像这样：

                <div className="d-flex justify-content-center">
                    <div
                        id="landing_left-and-banner"
                        className="d-flex justify-content-center landing_width-adjustment landing_svg-positioning landing_bg-svg-div"
                    ></div>
                    <div
                        id=""
                        className="landing_width-adjustment landing_svg-positioning landing_bg-svg-div"
                    ></div>
                </div>

#landing_left-and-banner {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: $uxui-dg;
    background-image: url("../../images/Illustration WEB - man.svg");
    background-repeat: no-repeat;
    background-size: 70% 70%;
    background-position: center;
    z-index: 100;
    opacity: 0;
}

.landing_bg-svg-div {
    background-image: url("../../images/middleLayer.svg");
    background-size: 90% 90%;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    border: 2px solid red;
    z-index: 2;
}

.landing_svg-positioning {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 85vh;
}

.landing_width-adjustment {
    width: auto;
}

它们是用来堆叠的……它只是显示中间层 svg，灰色的形状。

我怀疑我的技术完全不正确......也许甚至让 uxui 设计师给我两个图像的 .svg 文件是错误的方法？请纠正我。

请注意，搜索“css 使除背景图像之外的 div 透明”和各种形式显示了许多使背景图像本身透明的方法。我想保持背景图像的 svg 轮廓，同时使 div 的其余部分透明，因此页面一次显示所有三层。但同样，这可能是错误的方法。

Answer 1

您可以使用照片编辑器更轻松地完成此任务，并且更好地加载页面