Opacidade de cor de fundo CSS
Exemplo 1:
Abra o arquivo HTML e crie quatro títulos no arquivo HTML para que possamos aplicar a cor do plano de fundo e alterar a opacidade da cor usando CSS. Neste tutorial, usamos o Visual Code Studio para executar esses códigos de HTML e CSS. Criamos o arquivo HTML neste software e escrevemos o HTML. O código é fornecido na seguinte imagem:
Esta é a imagem do código HTML mencionado acima. Mudaremos a opacidade da cor de fundo de todos os títulos e mostraremos a cor com diferentes valores de opacidade.
Código CSS:
Vamos criar um arquivo CSS onde usamos a propriedade CSS para alterar a opacidade da cor de fundo dos títulos acima. Neste código, usamos a propriedade de "opacidade" do CSS.
Para o cabeçalho 1 "H1", definimos a "cor de fundo" para "amarelo". A "opacidade" é "0.4 ”para este título e a cor da fonte é“ preta ”. O cabeçalho 2 "cor de fundo" também é "amarelo", mas a "opacidade" aqui é "0.6 ”. A “cor de fundo” do título 3 também é “amarela”, mas desta vez, a “opacidade” é “0.8 ”. Agora, vem o título 4. Sua “cor de fundo” é a mesma dos títulos anteriores, mas não usamos a cor “opacidade” aqui. Então, a “cor de fundo” do quarto título aparece como a cor “amarela” original.
Saída:
A diferença no valor da opacidade da cor do fundo é mostrada nesta saída. Você pode ver a diferença entre a opacidade da cor nesta imagem.
A primeira cor de fundo do cabeçalho mostra mais transparência porque o valor da opacidade da cor do fundo é “0.4 ”. O segundo título é menos transparente que a cor de fundo do primeiro cabeçalho, pois seu valor de opacidade é “0.6 ”. Então, o mesmo que o segundo cabeçalho, a cor de fundo do terceiro cabeçalho é menos transparente que a segunda. Desta vez, a "opacidade" é "0.8 ”. E na última posição, usamos a cor amarela original sem usar qualquer valor de opacidade.
Exemplo #2:
Neste código HTML, temos dois títulos e quatro parágrafos. Cada parágrafo é escrito dentro da classe "div" e essas classes "div" são nomeadas "Primeiro", "Segundo" e "Terceiro", respectivamente. Usaremos esses nomes de div quando estilizarmos esses parágrafos no CSS. Vamos mudar a opacidade da cor de fundo de cada parágrafo.
Código CSS:
Este é o código CSS, onde definimos a cor do cabeçalho 1 como "verde". O texto dos títulos 1 e 2 está alinhado no "centro" usando o "alinhamento de texto". Defina a cor “Div” de fundo “verde” usando “RGB (0, 151, 19)”. O "preenchimento" é "10px" da esquerda, direita, superior e inferior. O "alinhamento de texto" usado aqui é "justificar" . Agora, use a primeira div, onde mudamos a cor verde de fundo com o valor da opacidade de “0.2 ”e está escrito na forma de“ RGBA (0, 151, 19, 0.2) ”. O "valor da opacidade" aqui é "0.2 ”. O valor "alfa" representa a "opacidade". A cor de fundo da segunda div também é verde com o valor alfa de “0.4 ”. O valor alfa para a terceira div é “0.7 ”com a mesma cor verde.
Saída:
Aqui, você pode ver que o primeiro parágrafo mostra mais transparência do que o segundo parágrafo porque o valor alfa ou opacidade do primeiro parágrafo é “0.2 ”o que significa que tem“ 20%”opacidade. A opacidade ou o valor alfa do segundo parágrafo é “0.4 ”e é menos transparente que o primeiro parágrafo. Na cor de fundo do terceiro parágrafo, o valor alfa é “0.7 ”e você notaria que é menos transparente. No último parágrafo, a cor do fundo é a cor “verde” original. Não usamos nenhum valor alfa no último título.
Exemplo #3:
Para o terceiro exemplo, vamos escrever títulos diferentes em html com o "id" e, mais tarde, use esses "id" para dar estilos diferentes a esses títulos no CSS.
Código CSS:
Neste código CSS, mudaremos a opacidade da cor de fundo de uma cor e também usaremos a cor original no próximo parágrafo. Consulte a imagem a seguir para o código CSS:
Aqui, usamos o ID do parágrafo e depois fornecemos a cor de fundo para todos os parágrafos. Para “P1”, definimos o “RBGA (255, 0, 0, 0.3) ”que é o código de cor“ vermelha ”com um valor alfa de“ 0.3 ”. Para "P11", usamos a mesma cor, mas sem o valor alfa ou opacidade. O "P2" é definido como "RGBA (0, 255, 0, 0.4) ”que é o código de cor“ verde ”e seu valor alfa é“ 0.4 ”. Em seguida, o "P22" é da mesma cor "verde" sem valor alfa. O valor RGBA “P3” é “(0. 0. 225, 0.5) ”que é a cor“ azul ”com um valor alfa de“ 0.5 ”. O "p33" tem a cor original "azul" e não tem opacidade. O "P5" tem o valor da opacidade de "0.7 ”e o código de cores é“ RGBA (255, 255, 0, 0.7) ”que representa“ amarelo ”. O "P55" não contém nenhum valor alfa. A cor "P6" é "rosa" com um valor de opacidade de "0.8 ”e o código é escrito como“ RGBA (255, 0, 255, 0.8) ". O último parágrafo, "P66", tem a "cor de fundo" de "rosa" sem opacidade.
Aqui, a cor de fundo do primeiro parágrafo é vermelha, mas com um valor de opacidade de 0.3 o que o torna mais transparente. O próximo parágrafo contém a cor de fundo vermelha original e você pode observar facilmente a diferença entre a cor original e a cor quando usamos o valor da opacidade. No terceiro parágrafo, a cor do fundo é exibida como verde com um valor de opacidade de “0.4 ”. No quarto parágrafo, a cor do fundo é "verde" sem qualquer valor alfa. A cor “azul” no quinto parágrafo é exibida e seu valor de opacidade é “0.5 ”. A cor original de fundo “azul” também é mostrada no parágrafo “sexto”. O próximo parágrafo mostra uma cor "cinza" usada com um "0.Valor de opacidade de 6 ”e esse cinza original também é usado no próximo parágrafo como cor de fundo. A cor "amarela" tem "0.Opacity 7 ”enquanto“ Cerise ”tem“ 0.8 ”. Ambas as cores originais também são exibidas nas cores de fundo do parágrafo.
Conclusão
Este tutorial é fornecido para você para que você possa aprender o conceito de opacidade de cor de fundo no CSS. Aprendemos dois métodos para modificar a opacidade: um é usando a propriedade "Opacity" e o outro é usando "RGBA" no qual "alfa" é usado para definir o valor da transparência da cor de fundo. Mostramos as cores de fundo com opacidade ou valor alfa e sem valor de opacidade em detalhes. Experimente esses exemplos e use esses valores de opacidade em seus códigos.