Jump to content

não sei onde estou errando se alguém puder me ajudar!


Ricardo Marques

Postagens Recomendadas

<!DOCTYPE html>

<html>

<head>

  <style>

    /* CSS para criar o quadrado */

    #quadrado {

      height: 400px;

      width: 500px;

      border: 3px solid black;

      margin-top: 100px;

      margin-left: 100px;

      }

 

      /* CSS para centralizar a imagem no quadrado */

      #quadrado img {

        display: block;

        margin: 0 auto;

        margin-top: 25%;

        margin-bottom: 100px;

      }

    </style>

  </head>

 

  <body>

    <!-- HTML para criar o quadrado -->

    <div id="quadrado">

      <!-- HTML para adicionar a imagem -->

      <img id="image" src="file:///C:/Users/Windows%2010/Documents/site-test/Camiseta-02-B1G-Supply-Co.png" alt="Sua imagem">

    <!-- JavaScript -->

    <input type="color" id="color-picker" style="left: 100px;">

 

    <script>

      // Obtém a referência para o elemento de entrada de cor

      const colorPicker = document.getElementById('color-picker');

      if (!colorPicker) {

        return;

      }

 

      // Altera o estilo do elemento de entrada de cor

      colorPicker.style.left = "100px";

 

      // Adiciona um ouvinte de evento para o elemento de entrada de cor

      colorPicker.addEventListener('input', function ()

        // Obtém a cor selecionada pelo usuário

        const color = this.value;

      );

        // Converte a cor em formato hexadecimal para formato "hue-rotate"

        const hue = parseInt(color.slice)

    </script>

  </body>

</html>

a cor que seria selecionada na color picker ela tem que ser colocada na cor onde essa imagem que foi adicionada que está em png e sem fundo apenas a imagem está preto.

test 4.html

Link to comment
Compartilhe em outros sites

  • 2 weeks later...

Eai Ricardo, eu olhei seu código, e pe

rcebi que estava usando "margin-left, margin-top" para tentar centralizar a imagem. Desta forma é mais difícil e não é a melhor forma. Você pode centralizar usando "Position", ou com Flexbox, usando "Alling-items" e "Justify-content". De uma olhada no código anexado, Usei uma dessas propriedades:

 

test 4.html

Link to comment
Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora
×
×
  • Create New...