función hsla() CSS

ejemplo

Define diferentes colores HSL con opacidad:

#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 oscuro */
#p4 {background-color:hsla(120,60%,70%,0.3);} /* verde suave */

intente hacerlo usted mismo

definición y uso

La función hsla() utiliza el modelo de modelo de tono-saturación-luminosidad-alpha (HSLA) para definir el color.

El valor de color HSLA es una extensión del valor de color HSL, que incluye un canal Alpha - este canal especifica la opacidad del color.

versión: CSS3

soporte del navegador

Los números en la tabla indican la versión del navegador que primero admite esta función.

función
hsla() 1.0 9.0 3.0 3.1 10.0

sintaxis CSS

hsla(tono, saturación, ligereza, alpha)
valor descripción
tono Define el ángulo en el círculo cromático (de 0 a 360) - 0 (o 360) es rojo, 120 es verde, 240 es azul.
saturación Define la saturación - 0% es escala de grises, mientras que 100% es color completo (completamente saturado).
ligereza Define el brillo - 0% es negro, 50% es normal, 100% es blanco.
alpha Número que define la opacidad, entre 0.0 (completamente transparente) y 1.0 (completamente opaco).