Opacidade de texto CSS

A opacidade é definida no CSS como "transparência". A opacidade do texto é o efeito de transparência que aplicamos a qualquer texto. Temos duas propriedades diferentes no CSS para definir a opacidade do texto. Para definir a opacidade do texto, usaremos a propriedade de "opacidade", bem como o valor alfa que determina a opacidade do texto em "RGBA". Usando a propriedade Opacity e modificando o valor alfa no RGBA, podemos ajustar a opacidade do texto no CSS. A opacidade varia entre “0.0 ”e“ 1.0."A cor" completamente transparente "tem um valor de" 0.0 ”enquanto a cor“ Totly Oppaque ”tem um valor de“ 1.0 ”. Usaremos as propriedades do CSS para modificar a opacidade do texto neste guia.

Exemplo # 1: Usando a propriedade Opacity

Precisamos de alguns parágrafos para usar o recurso de opacidade no CSS. Vamos fazer alguns parágrafos HTML aqui. Para fazer isso, devemos primeiro construir o arquivo html. Código do Visual Studio é o software que estaremos utilizando para realizar esses exemplos. Você pode fazer isso em qualquer software como o bloco de notas. Estamos fazendo algumas classes "div" com nomes diferentes no corpo. Dentro de cada div, estamos criando um parágrafo com o “

" marcação. Vamos fazer três divs com nomes únicos como "T1", "T2" e "T3". Estamos criando parágrafos dentro desses divs. Como resultado, três parágrafos foram criados. Usaremos este código HTML para outros exemplos também. Agora, iremos ao arquivo CSS e aplicaremos a opacidade do CSS ao texto. No elemento "Head" do código HTML, também vinculamos o arquivo CSS a esta página HTML.

Definimos a cor “vermelha” original para o cabeçalho usando a propriedade “cor” e estilize esse cabeçalho como “itálico”. Em seguida, usamos o nome da primeira div "T1", na qual temos um parágrafo e definimos seu "tamanho da fonte" para "16px". Usamos o "vermelho" para a fonte "cor". Mas na próxima linha, estamos usando a propriedade de "opacidade". Portanto, quando usamos esta propriedade, ela adicionará alguma opacidade ao efeito de transparência da cor do nosso texto. Aqui, estamos definindo um “0.Valor de 8 ”para esta propriedade de“ opacidade ”. Para o próximo “div.Parágrafo de T2 ”, definimos o mesmo“ tamanho da fonte ”“ 16px ”e o mesmo“ vermelho ”“ cor ”. Mas desta vez o valor da "opacidade" é alterado para "0.5 ”para o parágrafo da Segunda Div. Para o terceiro e o último “div.T3 ", estamos usando" 0.3 "como o valor" opacidade ".

Aqui está a saída, veja que a cor do texto aparece com diferentes valores de opacidade. A cor do cabeçalho é a cor vermelha original, mas a cor dos parágrafos aparece com alguns valores de opacidade. Todos os três parágrafos têm diferentes valores de opacidade.

Exemplo # 2: Usando o valor alfa no RGBA

Aqui, vamos utilizar os valores do RGBA nos quais "A" é para o valor alfa e esse valor alfa define a opacidade do texto. Primeiro, simplesmente colocamos o valor RGB no título e o valor RGB que estamos usando aqui representa a cor "roxa". Em seguida, usamos a palavra-chave "itálico" para definir o "estilo de fonte" do cabeçalho. Também o definimos como "font-família" e utilizamos a fonte "argelina" para isso. Está alinhado no "centro", utilizando a propriedade "Alinhamento de texto".

Então, vamos utilizar o primeiro “div.T1 "e use o valor" RGBA ". Aqui, colocamos o valor "RGB" da cor roxa e depois definimos seu valor alfa também como "0.9 ”. Depois disso, definimos o mesmo valor "RGB", mas mudamos o valor alfa e o definimos como "0.7 ”. Além disso, temos outro parágrafo div e para este último “div.parágrafo t3 ”, usamos o“ 0.Valor alfa de 5 ”que define sua opacidade para“ 0.Valor de 5 ”.

Observe no resultado como a cor do texto muda, dependendo do valor alfa. A cor do cabeçalho é o roxo original. Mas a cor dos parágrafos tem alguns valores alfa que definem sua opacidade. Os valores de opacidade nos três parágrafos são diferentes.

Exemplo # 3:

Primeiro, vamos definir a “cor de fundo” de todo o corpo e defini-lo como “preto”. Em seguida, usamos novamente os valores do RGBA em que “A” significa Alpha Value. Este valor alfa determina a opacidade do texto como discutimos acima. Para começar, simplesmente adicionamos o valor RGB ao cabeçalho, o número RGB que estamos usando aqui simboliza a cor “cinza claro”. Estamos usando o primeiro “div.T1 ”e o valor“ RGBA ”, onde estamos inserindo o valor“ RGB ”da mesma cor que o cabeçalho e define seu valor alfa como“ 0.7 ”. Depois disso, definimos o mesmo valor "RGB" que antes. Desta vez, mudamos o valor alfa para “0.4 ”. Também temos outro parágrafo div e usamos o “0.Valor alfa de 2 ”para alterar a opacidade deste último“ div.parágrafo t3 ”para“ 0.2 ”.

Observe como a cor do texto varia à medida que o valor alfa muda. O cabeçalho é a cor original, mas a cor dos parágrafos inclui valores alfa que determinam sua opacidade. Todos os três parágrafos têm valores distintos de opacidade.

Exemplo # 4:

Estamos criando nove classes de div diferentes aqui com um nome único para cada div e aplicar todos os valores de opacidade em cada div, separadamente no CSS.

Estamos estilizando o corpo inteiro e definindo o texto no "centro" da página. Então, todos os parágrafos aparecem no "centro". Também definimos "BOLD" para todo "corpo" usando "peso-fonte" e definimos o tamanho da fonte ou texto para "20px". Nosso cabeçalho aparecerá na cor original “Maroon” enquanto estamos definindo essa cor na propriedade “Color”. O "argelino" é a "fonte da fonte" para o cabeçalho. Definimos a mesma cor para todos os divs usando a propriedade "cor". Em todos os parágrafos da div, mudamos o valor da "opacidade". Em cada div, diminuímos o valor da opacidade por um desses para outras divs, definimos o valor da "opacidade" para "0.9 ”. Então, para o próximo div, estamos definindo o valor desta propriedade de opacidade para “0.8 ”. Para a terceira div, estamos usando “0.Valor de opacidade de 7 ”e assim por diante. Dessa forma, estamos mudando os valores de opacidade a cada vez para cada div.

Aqui, observe a saída abaixo, os valores de opacidade do texto começam de “0.9 ”e termine em“ 0.1 ”. A cor original também é usada aqui para o título e todos os parágrafos contêm valores de opacidade.

Conclusão:

Criamos este guia para você, no qual mudamos a opacidade do texto e aprendemos a modificar a opacidade do texto no CSS. Explicamos aqui que a opacidade é usada para dar um efeito transparente ao texto. Também exploramos as propriedades do CSS pelas quais podemos mudar a opacidade do texto. Descrevemos e demonstramos como usar a propriedade de "opacidade" e o valor "alfa" do RGBA para alterar a opacidade do texto.