A transparência da cor pode ser definida através de rgba() e hsla(), mas eles só podem definir a transparência ao definir a cor e não podem definir a transparência para imagens ou outros elementos.
Duas maneiras de definir transparência com CSS:
1. CSS rgba() define a transparência das cores
gramática:
RGBA(R,G,B,A);
RGBA é a abreviatura das três palavras Vermelho (vermelho), Verde (verde), Azul (azul) e Alfa (opacidade). Os valores de cores RGBA são uma extensão dos valores de cores RGB, com um canal alfa – que especifica a opacidade do objeto.
Introdução aos valores em rgba():
R: valor vermelho. Inteiro positivo (0~255)
G: valor verde. Inteiro positivo (0~255)
B: valor azul. Inteiro positivo (0~255)
R: Transparência. O valor está entre 0~1
rgba() pode simplesmente definir a transparência da cor, que tem muitas aplicações no layout da página. Por exemplo: deixe o fundo transparente, mas o texto acima fique opaco.
Exemplo:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>programação dotcpp</title><style>.demo{largura:350px;altura:300px;margem:50pxauto;}.demo*{largura :120px;altura:120px;mar gin:10px;float:left;}.demo1{background:rgba(255,0,0,1);}.demo2{background:rgba(255,0,0,0.5);}</style></head ><body><divclass=demo><divclass=demo1>A cor de fundo é opaca e o texto é opaco! </div><divclass=demo2>A cor de fundo é semitransparente e o texto é opaco! </div></div></body></html>Resultados em execução:
No exemplo acima, os valores de cores definidos são os mesmos, mas a transparência é diferente.
2. O atributo de opacidade CSS define a transparência do plano de fundo
gramática:
opacidade:valor;
valor: especifica a opacidade, de 0,0 (totalmente transparente) a 1,0 (totalmente opaco).
O atributo opacity é herdado e tornará transparentes todos os elementos do contêiner;
Exemplo:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>atributo de opacidade</title><style>.demo{largura:280px;altura:140px;margem:50pxauto;}.demo1,.demo2 {largura:120px;altura :120px;margem:10px;float:left;background:#2DC4CB;}.demo1{opacidade:1;}.demo2{opacidade:0.5;}</style></head><body><divclass=demo>< divclass=demo1><p>A cor de fundo é opaca e o texto é opaco! </p></div><divclass=demo2><p>A cor de fundo é transparente e o texto também é transparente! </p></div></div></body></html>Resultados em execução:
Opacity:0.5; torna todos os elementos do contêiner demo2 translúcidos.
Resumo: Embora tanto o método rgba() quanto o método de opacidade possam obter efeitos de transparência, rgba() atua apenas na cor do elemento ou em sua cor de fundo (os elementos filhos do elemento com transparência rgb() definida não herdarão seu efeito de transparência); e a opacidade é herdada, não afeta apenas o elemento em si, mas também torna transparentes todos os subelementos dentro do elemento.