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

Reiky18 · Janeiro 1, 2023

<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSS para criar o quadrado */
    #color-picker {
      color: var(--color);
    }

    #quadrado {
      height: 400px;
      width: 500px;
      border: 3px solid black;
      margin-top: 100px;
      margin-left: 100px;
      background-color: rgb(186, 235, 243);
    }

    /* 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="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;

      // 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;

     // Obtém a referência para a imagem
     const image = document.getElementById('image');

     // Atualiza a cor da imagem
     image.style.filter = "bright";
        });
    </script>
  </body>
</html>

a cor que sendo selecionada no color picker ela não esta sendo executada na imagem fazendo trocar a cor da imagem, alguém poderia me ajudar a corrigir.

wash · Janeiro 1, 2023

<!DOCTYPE html>
<html>

<head>
  <style>
    div div {
      height: 400px;
      width: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 3px solid black;
      background-color: rgb(186, 235, 243);
    }

    div#quadrado img {
      mix-blend-mode: luminosity;
    }

    main {
      display: flex;
      justify-content: center;
    }
  </style>
</head>

<body>
  <main>
    <!-- HTML para criar o quadrado -->
    <div><label>Com filtro</label>
      <div id="quadrado">
        <!-- HTML para adicionar a imagem -->
        <img id="image" src="https://picsum.photos/500/400" alt="imagem">
      </div>
    </div>
    <div><label>Sem filtro</label>
      <div>
        <img src="https://picsum.photos/500/400" alt="imagem">
      </div>
    </div>
  </main>
  <a href="./">Refresh image</a>
  <input type="color" id="colorPicker">

  <!-- JavaScript -->
  <script>

    // Adiciona um ouvinte de evento para o elemento de entrada de cor
    colorPicker.addEventListener('input', function () {
      // Atualiza a cor da imagem
      quadrado.style.backgroundColor = this.value;;
    });
  </script>
</body>

</html>

https://codepen.io/washalbano/pen/abjZBYg

Entrar

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

Pergunta

Reiky18

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

wash

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades