Definir a opacidade do fundo em CSS

1. Use a propriedade opacity para criar uma cor transparente em CSS
2. Use a função rgba() para criar cores transparentes em CSS
3. Use valores hexadecimais para criar uma cor transparente em CSS

Neste artigo, apresentaremos três métodos para criar cores transparentes em HTML usando CSS. Isso definirá a opacidade do plano de fundo no CSS.

Use a propriedade opacity para criar uma cor transparente em CSS

A opacity é uma das propriedades utilizadas no CSS, principalmente com as cores. Podemos usar valores entre 0 e 1 para mostrar a opacidade da cor ou de um elemento. Se o valor for 1, significa que a cor é 100% opaca. Isso significa que a cor não é transparente. Se diminuirmos o valor inicialmente, o elemento ficará mais transparente. Se o valor de opacity for 0.5, a cor ficará semitransparente ou 50% transparente. No entanto, ao usar opacity, o elemento filho também fica transparente.

Por exemplo, crie um documento HTML com o título h1 e uma classe transparent. Defina a background-color como #cc33ff e o valor opacity 0.4 após selecionar a classe transparent no CSS. Se quisermos que o título e sua cor de fundo fiquem mais transparentes, podemos diminuir o valor de opacidade.

O exemplo abaixo mostra que a cor de fundo e o título h1 ficam transparentes à medida que mantemos o valor de opacity, ou seja, 0.4.

Código de exemplo:

<h1 class="transparent"> Hello world </h1>

.transparent{
    background-color: #cc33ff;
    opacity: 0.4;
}

Use a função rgba() para criar cores transparentes em CSS

A função rgba() define as cores usando o modelo vermelho-verde-azul-alfa. O rbg na função rbga() significa valores de cor para vermelho, verde e azul, enquanto a significa a opacidade da cor. Cada parâmetro (vermelho, azul, verde) define a intensidade da cor entre 0-255. Enquanto o valor de a deve estar entre 0-1. Por exemplo rgba(255, 100, 100, 0.4). Quanto menor o valor de a, mais transparente será a cor. O elemento filho não fica transparente, ao contrário da propriedade opacity. Se o valor de a for 0.5, a cor será semitransparente ou 50% transparente.

Por exemplo, crie um documento HTML com o título h1 e a classe transparent. Escreva o texto Hello World entre a etiqueta do título. Use a função rgba() para dar a cor de fundo à classe. Coloque o valor rgba como rgba(255, 100, 100, 0.4). Diminua o valor de a para torná-lo mais transparente e aumente o valor de a para torná-lo mais opaco.

O exemplo abaixo mostra que a cor de fundo do título fica transparente quando colocamos o valor de a como 0.4. No entanto, o elemento filho heading não fica transparente.

Código de exemplo:

<h1 class="transparent"> Hello world </h1>

.transparent{
    background-color: rgba(255, 100, 100, 0.4);
}

Use valores hexadecimais para criar uma cor transparente em CSS

Freqüentemente, usamos valores hexadecimais com seis caracteres seguidos de # para dar uma cor específica a um elemento HTML. Por exemplo, #A5BE32. Podemos tornar a cor transparente adicionando dois valores numéricos no final do valor hexadecimal e tornando-o um valor hexadecimal de oito caracteres. Por exemplo, #A5BE3280. Aqui, #A5BE32 denota a cor e 80 no final denota a opacidade da cor. Se você quiser uma cor transparente de 50%, pode usar o valor 80 no final do código hexadecimal. Como a escala é 0-255 em cores RGB, a metade seria 255/2 = 128, que convertido em hexadecimal torna-se 80. O elemento filho não fica transparente, ao contrário da propriedade opacity.

Por exemplo, crie um documento HTML com o título h1 e a classe transparent, ou seja, <h1 class="transparent">Hello world </h1>. Dê #A5BE32 cor de fundo para a classe. Adicione 80 no final do código hexadecimal para torná-lo 50% transparente. De forma que o código hexadecimal se torne #A5BE3280.

O exemplo abaixo mostra que a cor de fundo do título fica 50% transparente conforme adicionamos 80 no final do código hexadecimal.

Código de exemplo:

<h1 class="transparent"> Hello world </h1>

.transparent{
    background-color: #A5BE3280
}