Filtro Alpha em CSS

Benedito Silva Júnior 15/11/2021

O filtro Alpha em CSS permite ajustar a transparência de elementos, sendo especialmente útil para criar efeitos de opacidade e destacar conteúdo. Com opacity, podemos definir o nível de visibilidade de um elemento, variando de 0 (totalmente transparente) a 1 (totalmente opaco). Neste post, aprenda sobre filtro Alpha em CSS.

Vantagens

Além disso, o filtro Alpha pode ser aplicado em compatibilidade com navegadores mais antigos através do filter: alpha(opacity=x);, substituindo o valor x por um número de 0 a 100. Esta técnica é valiosa para criar efeitos de sobreposição e foco em páginas web.

Exemplo de código

.transparent-box {
  opacity: 0.7;
}

Além de opacity, há outras propriedades CSS que ajudam a controlar a opacidade de elementos específicos, como rgba() para cores de fundo e borda, onde o último valor define o nível de transparência. Exemplo:

.elemento {
    background-color: rgba(255, 0, 0, 0.3); /* Fundo vermelho com 30% de opacidade */
}

Esses efeitos são úteis para destacar elementos, criar sobreposições e melhorar a estética e legibilidade de um site ao interagir com o design visual das páginas.

Outro exemplo prático

É 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.

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

QUER SER UM PROGRAMADOR FULL-STACK E DOMINAR AS PRINCIPAIS TECNOLOGIAS DO MERCADO?

Aprenda através de projetos reais e aulas práticas. São 20 cursos completos + cursos bônus. Grupos privados exclusivos, atualizações constantes e lives semanais.

Python, PHP, Java Script, CSS, Node, Angular JS, MySQL, Photoshop, Flutter, AWS, Apache e muito mais!

CLIQUE NA IMAGEM ABAIXO E CONFIRA MAIS DETALHES: