Creé una structure que consta de 2 fotos png. uno de ellos lines aleatorias y su z-index es 6 y el otro es una foto de un oso y su z-index es 5
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="test.css"> <title>Page Redirection</title> </head> <body> <div class="kutu"> <div class="cizgi"> </div> <div class="resim1"> </div> </div> </body> </html> .kutu { position: relative; width: 500px; height: 500px; background-color: aqua; display: block; margin: auto; background-image: url(background.jpg); } .resim1 { position: absolute; height: 100%; width: 200px; max-width: 100%; background-image: url(bear.png); background-repeat: no-repeat; background-size: 200px 200px; z-index: 5; left: 60%; top: 50%; filter: brightness(0) invert(1); } .cizgi { position: absolute; height: 100%; max-width: 100%; width: 100%; background-repeat: no-repeat; background-image: url(fe45bef1-0c56-46ea-a58e-998a46454321.png); background-size: 500px 500px; z-index: 6; }.La foto del oso siempre aparecerá aleatoriamente en cualquier parte del cuadro. La foto del oso normalmente se ve así , pero cuando las líneas están en ella, se ve así . Lo que quiero es crear otro div a continuación y de alguna manera reflejar la nueva versión de la foto del oso, es decir, la versión a rayas. Si esto es exactamente lo que quiero, esto es todo.
