Aplicando filtro ( imagem ) em background

Aplicando filtro ( imagem ) em background

 por web Offline » Sáb Jan 26, 2008 12:09 pm

Vou mostrar aqui como aplicar uma figura sobre um determinado background. O objetivo é proteger a imagem contra cópia via ( Botão direito + Salvar Imagem Como... e print. A primeira coisa a ser feita é criar um gif que irá ficar por cima da imagem, de preferência, um texto com cor e com fundo transparente. Esse script é indicado para uso em galeria de imagens, onde todas imagens tem o mesmo tamanho. Veja o CSS <style type="text/css"> div#filtro{ position:relative; z-index:2; width: 200px; height: 200px; filter: alpha(opacity=50); -moz-opacity: 0.50; opacity:.50; background-image:url(logo_com_fade.gif); background-position:right bottom; background-repeat:no-repeat; } .base{ position:relative; z-index:1; padding:0px; border: #000000 1px solid; } </style> Obs. sobre o CSS acima - O width e height acima deve ter o tamanho padrão de suas figuras base, que receberão o filtro. - logo_com_fade.gif é o logo que vai ficar por cima das base ( imagens ) - O valor 50 usado nos opacity, é a quantidade de transparência do logo. Veja agora como deve ficar sua base HTML. <div class="base" style="background-image:url(figura.jpg); width:200px;height:200px;"> <div id="filtro"></div> </div> Note que a figura da base tem o mesmo tamanho ( em largura e altura ) do filtro. Você pode repetir os divs acima quantas vezes for necessário, trocando somente a figura. web ADMIN Mensagens: 11904 Registrado em: Sáb Jan 20, 2007 6:08 pm Localização: RJ / RJ / Brasil Website