我可以让div只显示svg图像的内容，否则是透明的，所以我可以堆叠两个svg在彼此的顶部?

Question

我有两个。svg文件是我的ux/ui设计师给的(来自fiverr). .svg文件对我来说是新的。

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

我们将它们命名为middleLayer.svg和Illustration WEB - man.svg

我以前从来没有这样做过，但我猜测可以通过:

• 从文档流中取出两个div，为每个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，灰色的形状。

我怀疑我的技术是完全错误的…也许让ui设计师给我两个图像的.svg文件是错误的方法?请纠正我。

注意搜索"css使div透明，除了背景图像"各种形式显示了许多使背景图像本身透明的方法。我想保留背景图像的svg轮廓，同时使div的其余部分透明，以便页面一次显示所有三个图层。但是它可能是错误的方法。

Answer 1

使用照片编辑器可以更容易地完成此任务，并且对于加载

的页面会更好。