Can I make a div display only the contents of a svg image and otherwise be transparent, so I can sta-CodePudding

I have two .svg files I was given by my ux/ui designer (from fiverr). .svg files are new to me.

I have a mock he gave me. The mock shows the background, then a middle layer as a .svg file, and then a man standing by a computer as a .svg file.

Let's call them middleLayer.svg, and Illustration WEB - man.svg

I've never done this before but I speculated it could be done via:

taking two divs out of the document flow, assigning a .svg to each one
and then stacking them with z-index values while also
making everything except the actual svg outline itself transparent.

Like this:

                <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;
}

They're made to stack ... It's just showing the middle layer svg though, the grey shape.

I'm suspicious my technique is entirely incorrect... perhaps even having the uxui designer give me .svg files of the two images was the wrong approach? Correct me please.

Note that searching "css make div transparent except for background image" and various forms shows lots of ways to make the background image itself transparent. I want to keep the svg outline of the background image while making the rest of the div transparent, so the page shows all three layers at once. But again it might be the wrong approach.

CodePudding user response：

You Could Accomplish This task easier with a photo editor and it would be better for the pages load