1

Mi código de html tiene un fondo dinámico que al parecer no deja interactuár con la interfaz del audio. Creo que tiene algo que ver con el foreground, creo que es por que tan adelante o atras está el (z-index).Es como si el foreground opacara o tapara mi interacción con el botón de play del audio, se puede ver perfectamente la interfaz del audio, mas sin embargo no puedo darle play.

Ya intenté cambiar el Z-index de los atributos, pero no cambia nada, puse como el numero mas alto al audio, que tengo como class= "superx" .

El fondo es un paisaje movil con un gif de un gato caminando si alguien pudiera ayudarme estaría de perlas, no es algo urgente pero me gustaria resolverlo lo mas pronto posible

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        .tuna {
  animation: walk-cycle 1s steps(12) infinite;
  background: url("tunita.png") 0 0 no-repeat; 
  height: 200px;
  width: 400px;
  position: absolute;
  bottom: 1px;
  left: 50%;
  margin-left: -200px;
  transform: translateZ(0); /* offers a bit of a performance boost by pushing some of this processing to the GPU in Safari*/
}

@keyframes walk-cycle {  
  0% {background-position: 0 0; } 
  100% {background-position: 0 -2391px; } 
}

.foreground, .midground, .background {
  width: 100%;
  height: 100%;
  position:absolute;
  top: 0; left: 0;
  translate: 3d (0,0,0); 
}

.foreground {
  animation: parallax_fg linear 10s infinite both;
  background:  url(http://stash.rachelnabors.com/24ways2012/foreground_grass.png) 0 100% repeat-x;
  z-index: 3;
}

@keyframes parallax_fg {  
  0% { background-position: -3584px 100%;} 
  100% {background-position: 0 100%; } 
}

.superx{
  width: 500px;
  height: 54px;
  z-index: 3;
  background-color: tomato;
}

.midground {
  animation: parallax_mg linear 20s infinite;
  background:  url(http://stash.rachelnabors.com/24ways2012/midground_grass.png) 0 100% repeat-x;
  z-index: 2;
}

@keyframes parallax_mg {  
  0% { background-position: -3000px 100%;} 
  100% {background-position: 0 100%; } 
}
.background {
  background-image:
    url(http://stash.rachelnabors.com/24ways2012/background_mountain5.png),
    url(http://stash.rachelnabors.com/24ways2012/background_mountain4.png),
    url(http://stash.rachelnabors.com/24ways2012/background_mountain3.png),
    url(http://stash.rachelnabors.com/24ways2012/background_mountain2.png),
    url(http://stash.rachelnabors.com/24ways2012/background_mountain1.png);
  background-repeat: repeat-x;
  background-position: 0 100%;
  z-index: 1;
  animation: parallax_bg linear 40s infinite;
}

@keyframes parallax_bg {
  100% { background-position-x: 2400px, 2000px, 1800px, 1600px, 1200px;}
}

body {
    background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%),
    #d2d2d2 url(http://stash.rachelnabors.com/24ways2012/background_clouds.png);
}
    </style>
<body>
    <div class="superx">
      <audio src="multi/pipo_song.mp3" preload="auto" loop controls></audio>
    </div>
    <div class="foreground"></div>
<div class="midground">
  <div class="tuna"></div>
</div>
<div class="background">
</div>
</body>
</html>

1 respuesta 1

0

Es porque tu .foreground lo tienes como position: absolute;.
Si le agregas el mismo position a .superx y aumentas su z-index, debería funcionar:

.tuna {
  animation: walk-cycle 1s steps(12) infinite;
  background: url("tunita.png") 0 0 no-repeat;
  height: 200px;
  width: 400px;
  position: absolute;
  bottom: 1px;
  left: 50%;
  margin-left: -200px;
  transform: translateZ(0);
  /* offers a bit of a performance boost by pushing some of this processing to the GPU
in Safari*/
}

@keyframes walk-cycle {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 -2391px;
  }
}

.foreground,
.midground,
.background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  translate: 3d (0, 0, 0);
}

.foreground {
  animation: parallax_fg linear 10s infinite both;
  background: url(http://stash.rachelnabors.com/24ways2012/foreground_grass.png) 0 100% repeat-x;
  z-index: 3;
}

@keyframes parallax_fg {
  0% {
    background-position: -3584px 100%;
  }

  100% {
    background-position: 0 100%;
  }
}

.superx {
  width: 500px;
  height: 54px;
  position: absolute;
  z-index: 4;
  background-color: tomato;
}

.midground {
  animation: parallax_mg linear 20s infinite;
  background: url(http://stash.rachelnabors.com/24ways2012/midground_grass.png) 0 100% repeat-x;
  z-index: 2;
}

@keyframes parallax_mg {
  0% {
    background-position: -3000px 100%;
  }

  100% {
    background-position: 0 100%;
  }
}

.background {
  background-image:
    url(http://stash.rachelnabors.com/24ways2012/background_mountain5.png),
    url(http://stash.rachelnabors.com/24ways2012/background_mountain4.png),
    url(http://stash.rachelnabors.com/24ways2012/background_mountain3.png),
    url(http://stash.rachelnabors.com/24ways2012/background_mountain2.png),
    url(http://stash.rachelnabors.com/24ways2012/background_mountain1.png);
  background-repeat: repeat-x;
  background-position: 0 100%;
  z-index: 1;
  animation: parallax_bg linear 40s infinite;
<div class="superx">
  <audio src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3" autoplay preload="auto" loop controls></audio>
</div>
<div class="foreground"></div>
<div class="midground">
  <div class="tuna"></div>
</div>
<div class="background">
</div>

1
  • muchas gracias, eres un Dios el 5 mar. 2020 a las 2:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.