Definir transparência com código hexadecimal em HTML

1. Use o código hexadecimal CSS para fornecer transparência ao plano de fundo em HTML
2. Use a propriedade CSS opacity para tornar o fundo transparente em HTML
3. Use a propriedade CSS background para tornar o plano de fundo transparente em HTML

Este artigo apresentará métodos para adicionar transparência aos elementos HTML. Usaremos CSS para adicionar transparência.

Use o código hexadecimal CSS para fornecer transparência ao plano de fundo em HTML

Podemos usar o código hexadecimal CSS para fornecer transparência a um elemento HTML. Podemos definir o código hexadecimal como o valor da propriedade background. O código hexadecimal que usaremos tem oito dígitos. O formato do código hexadecimal de oito dígitos é #RRGGBBAA. Os primeiros seis dígitos representam o código hexadecimal para vermelho, verde e azul, respectivamente. Os dois últimos dígitos são o código hexadecimal para opacidade.

Por exemplo, crie um div e escreva algum texto nele. Em CSS, selecione div e defina a propriedade background como #00ff0080. O código hexadecimal #00ff00 representa a cor verde e 80 representa a opacidade da cor. Isso criará um fundo verde no texto e dará a opacidade de 50% ou o valor 128. O equivalente binário do valor hexadecimal 80 é 128. Assim, podemos usar o código hexadecimal para criar um elemento transparente em HTML.

Código de exemplo:

<div class="light">This is some text</div>

div {
    background: #00ff0080;
}

Use a propriedade CSS opacity para tornar o fundo transparente em HTML

Podemos criar um fundo transparente usando a propriedade opacity em CSS. Podemos usar essa propriedade em qualquer elemento em HTML e tornar o fundo transparente. A propriedade opacity define a opacidade de um elemento. É responsável por definir o grau em que o conteúdo por trás de um elemento é oculto. O valor varia de 0.0 a 0.9. Os valores mais baixos se assemelham ao nível mais baixo de opacidade e vice-versa. Isso significa que quando o valor da opacidade está próximo a 0.0, o conteúdo por trás do elemento é mais visível. E o conteúdo parece mais transparente. Também podemos usar a representação % para definir a opacidade. Ele varia de 0% a 100%.

Por exemplo, crie um div com a classe bg. Escreva algum texto como um elemento entre o div. Em CSS, selecione o elemento div e defina o fundo como yellow usando a propriedade background-color. Em seguida, selecione a classe bg usando o seletor de classe. Em seguida, defina a opacity para o valor de 0.5.

O exemplo abaixo cria uma cor de fundo amarela e há algum texto escrito nela. O valor de opacidade 0.5 adiciona alguma transparência ao elemento. Podemos alterar o valor de 0.0 para 1.0 para testar o grau de opacidade no exemplo a seguir. Assim, adicionamos transparência à cor de fundo no tutorial.

Código de exemplo:

<div class="bg">This is some text</div>

div {
    background-color: yellow;
}

.bg {
    opacity: 0.5;
}

Use a propriedade CSS background para tornar o plano de fundo transparente em HTML

Há uma desvantagem em usar a propriedade opacity. O valor opacity definido no elemento pai se aplica a todos os elementos filhos. Para nos livrarmos deste problema, podemos usar a propriedade CSS background. Podemos especificar o valor rgba para o elemento e evitar que ele aplique opacidade aos elementos filhos. A propriedade background usa a função rgba para especificar as cores RGB com sua opacidade. A sintaxe da função é mostrada abaixo.

rgba(red, green, blue, alpha)

Podemos especificar a intensidade dos valores RGB no intervalo de 0 a 255. Também podemos representar o valor percentual no intervalo de 0% a 100%. Podemos especificar o valor de alfa conforme discutimos no primeiro método.

Faça algumas alterações CSS no exemplo de código do primeiro método. Na seleção de div, remova a propriedade background-color e adicione a propriedade background. Escreva a função rgba() como o valor da propriedade. Defina o valor de vermelho como 255 e defina 0 para verde e azul. Escreva o valor alpha como 0.2. Em seguida, remova a seleção de classe bg.

Os trechos de código abaixo irão criar um fundo vermelho no texto e adicionar um grau de transparência.

Código de exemplo:

<div class="light">This is some text</div>

div {
 background:rgba(255,0,0, 0.2)
}