3
respostas

[Dúvida] Como ter botões fixos de acordo com imagem por trás?

Eu estou dando continuidade ao projeto MIDI que foi desenvolvido durante formação html e css..

Coloquei a imagem de uma bateria como background e posicionei os botões nas peças da bateria, assim quando clicar na peça, ele emita o som.

Eu preciso que os botões acompanhem a imagem.. Dependendo da tela, a imagem do background fica maior e preciso que os botões acompanhem a imagem, fiquem sempre posicionados nas peças da bateria.

Como posso fazer isso? Se precisar deixar a imagem da bateria fixa, sem responsividade nao tem problema, o mais importante é os botoes sempre acompanharem a imagem.

3 respostas

Oi, Leandro, tudo bem?

Desculpe a demora em te responder!

Para que eu possa simular o seu código e te ajudar de forma mais assertiva, peço que você compartilhe o link do seu projeto no GitHub ou um drive com todos os arquivos utilizados no projeto.

Fico no aguardo!

Segue o repositorio do projeto:

https://github.com/leandrolinkolnr/Midi

Oi, Leandro, tudo bem?

Desculpe a demora em te dar um retorno!

O projeto desenvolvido neste curso possui foco em botões quadrados e para adaptar o resultado conforme você deseja, teríamos que utilizar conceitos mais complexos de CSS. Além disso, a imagem ainda apresenta algumas limitações.

Podemos usar as teclas do teclado para buscar uma alternativa mais simples para a resolução do projeto, como no projeto que deixo como referência abaixo:

Portanto, caso queira se aventurar, recomendo que se baseie no projeto que deixei como exemplo acima, pois o uso das teclas, torna o projeto mais responsivo, pois não há necessidade de adaptar os botões para cada formato de tela e evita erros de posicionamento, já que os dispositivos apresentam diferentes resoluções.

Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!