Tengo dos archivos .svg que me dio mi diseñador de ux/ui (de fiverr). Los archivos .svg son nuevos para mí.

Tengo un simulacro que me dio. El simulacro muestra el fondo, luego una capa intermedia como un archivo .svg y luego un hombre parado junto a una computadora como un archivo .svg.

Llamémoslos middleLayer.svg, e Ilustración WEB - man.svg

Nunca he hecho esto antes, pero especulé que podría hacerse a través de:

• sacando dos divs del flujo del documento, asignando un .svg a cada uno
• y luego apilarlos con valores de índice z mientras también
• haciendo que todo, excepto el contorno real de svg, sea transparente.

Como esto:

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

Están hechos para apilarse... Sin embargo, solo muestra el svg de la capa intermedia, la forma gris.

Sospecho que mi técnica es completamente incorrecta... ¿Quizás incluso que el diseñador de uxui me diera archivos .svg de las dos imágenes fue un enfoque incorrecto? Corrígeme por favor.

Tenga en cuenta que buscar "css hacer que div sea transparente excepto la imagen de fondo" y varias formas muestran muchas formas de hacer que la imagen de fondo sea transparente. Quiero mantener el contorno svg de la imagen de fondo mientras hago que el resto del div sea transparente, para que la página muestre las tres capas a la vez. Pero, de nuevo, podría ser el enfoque equivocado.