função hsla() CSS

exemplo

Defina diferentes cores HSL com opacidade:

#p1 {background-color:hsla(120,100%,50%,0.3);} /* verde */
#p2 {background-color:hsla(120,100%,75%,0.3);} /* verde claro */
#p3 {background-color:hsla(120,100%,25%,0.3);} /* verde escuro */
#p4 {background-color:hsla(120,60%,70%,0.3);} /* verde suave */

Experimente você mesmo

definição e uso

A função hsla() usa o modelo de modelo de tom-saturação-brilho-alfa (HSLA) para definir cores.

O valor de cor HSLA é uma extensão do valor de cor HSL, com canal alfa - esse canal especifica a opacidade da cor.

versão: CSS3

suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta plenamente essa função.

função
hsla() 1.0 9.0 3.0 3.1 10.0

sintaxe CSS

hsla(tono, saturação, clareza, alpha)
valor descrição
tono Definição do grau no círculo das cores (de 0 a 360) - 0 (ou 360) é vermelho, 120 é verde, 240 é azul.
saturação Definição de saturação - 0% é cinza, enquanto 100% é completamente colorido (completamente saturado).
clareza Define a brilho - 0% é preto, 50% é normal, 100% é branco.
alpha Define a opacidade como um número entre 0,0 (completamente transparente) e 1,0 (completamente opaco).