el que he implementado hasta ahora
El fondo de color gris es el color de fondo del div alineado que está en posición absoluta para mostrar la selección de recorte. Quiero que el área dentro de la línea no tenga ningún color para que parte de la imagen sea visible y el resto debe tener un fondo gris tal como está.
.bounded-image { width: fit-content; position: relative; } img { width: 292px; } .bordered-image { position: absolute; border: 1px dashed #5035e1; box-sizing: border-box; width: 140.816px; height: 260.12px; top: 71.2428px; left: 76.4561px; background: transparent; } .bg-image { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 4; background: black; opacity: 0.4 } <div className="bounded-image"> <img src="https://qoiowqcb.app.blr.streamoid.com/mls-data/streamoid_internal/images/76da8ac2445d14d23529390b63b19d4a"/> <div className="bg-image"></div> <div className="bordered-image" ></div> </div>He preparado una posible solución a tu problema. Sin embargo, la pregunta es si la <div class="bordered-image"> interior tiene un tamaño fijo. Porque de lo contrario, debe ajustar el valor del background-size: calc(170%); propiedad.
* { margin: 0; padding: 0; box-sizing: border-box; } .bounded-image { width: fit-content; position: relative; width: 500px; height: 700px; } img { width: 100%; } .bordered-image { position: absolute; border: 1px dashed #5035e1; width: 300px; height: 450px; top: 130px; left: 100px; background: url(https://qoiowqcb.app.blr.streamoid.com/mls-data/streamoid_internal/images/76da8ac2445d14d23529390b63b19d4a); background-position: center; background-size: calc(170%); background-repeat: no-repeat; z-index: 5; } .bg-image { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: black; opacity: 0.4; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="bounded-image"> <img src="https://qoiowqcb.app.blr.streamoid.com/mls-data/streamoid_internal/images/76da8ac2445d14d23529390b63b19d4a"/> <div class="bordered-image"></div> <div class="bg-image"></div> </div> </body> </html>