CriandoBits
Identifique-se Entrar Esqueceu a senha? Esqueci minha senha

Cascading Style Sheets (CSS) - Filtro Alpha

Por Benedito Silva Júnior - publicado em 13/07/2016


É possível reproduzir o efeito de um filtro alpha para imagens que sejam compatíveis com qualquer navegador com suporte ao CSS, evitando assim, utilizar uma solução específica de um determinado fabricante.

Veja:

Código HTML/XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <html xmlns="estilo.css" rel="stylesheet" type="text/css" /> <title>CSS - Dicas</title> </head> <body> <h1>Exemplo de Filtro Alpha para imagem></h1> <div class="imagem"> <img src="foto_grande.jpg" width="500" height="300" alt="Lagoa do taquaral" /> <div class="texto">Campinas<br />Vista da lagoa<br />Taquaral<br /> </div> </body> </html>

É necessária uma imagem de fundo "especial", no formato GIF, para a área de texto. Essa imagem é composta por duas cores no formato de um tabuleiro de dama ou xadrez, sendo que uma das cores será configurada como transparente.

Código CSS (arquivo estilo.css):

body { font-family: Verdana, Arial, Helvetica, sans-serif; } div.imagem { width: 530; } div.texto { width: 50%; position: absolute; left: 23%; top: 43%; text-align: center; text-weight: bold; background: transparent url(alpha.gif) center repeat; } h1 { font-size: 15pt; color: #000000; text-align: center; border-top: 1px solid #000000; border-bottom: 1px solid #000000; margin-bottom: 1px; }


 
Voltar a pagina anteriorVoltarSubir ao topo da páginaTopo