Imagem e HTML - Sobreposição

Veja como pode fazer com a imagem

Olá pessoal, hoje eu vou falar com vocês uma jogada com imagem e HTML em uma página web. Se você navega na Internet pelo computador e pelo celular você sabe que é bem fácil pegar uma imagem de um site com apenas o clique direito do mouse, clica e arrasta ou clica e segura.

Devido a essa certa insegurança com imagens, existem várias maneiras de evitar esse tipo de download de imagem, mas as pessoas sempre arrumam um jeito para pegar.

1. Existe o script que evita o clique direito do mouse
2. Existe o script em javascript que evita selecionar algum objeto da tela
3. E existem muitos outros scripts

Mas o que vou falar com você aqui agora é de uma sobreposição de imagem, uma das coisas que pode ser usado para evitar a cópia ou arrastar e botão direito por exemplo.

Eu tenho no HTML um div onde pode ser usado um style com uma imagem em background. Depois disso você pode colocar a tag img com uma imagem transparente do mesmo tamanho da imagem original que está dentro do div.

Vamos ver no código?

Código 1.1 - Sobrepor a imagem

<div style="background-image: url(imagem-principal.png);">
   <img src="imagem-transparente.png" style="border:0px; width:600px; height:887px;" />
</div>

Pronto, o código 1.1 mostra na primeira linha o style com a imagem em background. Essa é a imagem principal e dentro do div existe a imagem transparente do mesmo tamanho da imagem principal.

Assim a imagem transparente fica por cima da imagem principal e com isso quando o usuário for copiar, clicar com o botão direito ou salvar a imagem, o que ele vai salvar é a imagem transparente ao invés da imagem principal.

Bom, espero ter ajudado e qualquer dúvida por entrar em contato pela rede social ou pelo meu site.

Instagram: @mauriciojunior_net

Site: www.mauriciojunior.net