0
125
VistasBlindside the Borg queen: imagen con un elemento superpuesto que se posiciona de manera absoluta sobre la misma área de la imagen cuando la imagen cambia de escala
Lo sentimos si esta no es la forma correcta de hacerlo, no dude en sugerir otras soluciones. No me importa cuál sea el texto o el elemento de la venda de los ojos, siempre y cuando sirva al propósito. Tal vez sea posible hacer esto con un svg, pero es demasiado avanzado para mí.
Estoy tratando de crear una página que muestre una imagen con un área determinada cubierta para que el lector no pueda verla. Aquí está mi código hasta ahora. No estoy seguro de cómo calcular/recalcular la posición de ese elemento según la nueva posición y el tamaño de la imagen cuando la ventana del navegador cambia de tamaño https://jsfiddle.net/xay5u78s/
<html lang="en"> <head> <title>Bootstrap Responsive image example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body> <div > <div > <img src="https://upload.wikimedia.org/wikipedia/en/b/bc/Borg_Queen_2372.jpg" class="img-fluid" style="width:30%" alt="image"> <div class="position-absolute" style="height:30px; background-color: white; top: 25%;left: 13%;"> Covered covered </div> </div> </div> </body> </html> Efecto deseado 
Fiddle actualizado con la solución sugerida por @quentin
https://jsfiddle.net/xay5u78s/1/
1 Respuestas
Responde la pregunta0
Los elementos con posición absoluta se colocan con respecto a los bordes del elemento ancestro más cercano que se coloca (lo que significa "Tiene position: anything-but-static ").
Así que establezca el div contenedor en position: relative y déle las mismas dimensiones que la imagen.