Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17548
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Aplicando filtro ( imagem ) em background

26-01-2008 12:09

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.
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado