我可以让 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

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

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

Can I make a div display only the contents of a svg image and otherwise be transparent, so I can stack two svgs on top of each other?

html

javascript

css

svg