English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
定义 HSL 颜色，并设置透明度：
!DOCTYPE html>
<title>基础教程(oldtoolbag.com)</title>
<style>
body {
background: url('/run/images/bg2.png') beige;
color: hsla(0, 0%, 0%, 1);
font-size: 2em;
}
article {
background-color: hsla(30, 100%, 50%, 0.5);
border: 5px solid darkorange;
margin: 20px;
text-align: center;
}
</style>
</head>
<body>
<article>
<h1>Stars</h1>
</article>
</body>
</html>Prueba y observa ‹/›La función hsla() utiliza tono, saturación, luminosidad y transparencia para definir colores.
HSL es tono, saturación, luminosidad, transparencia (en inglés: Hue, Saturation, Lightness, Alpha).
Tono (H)Es la propiedad básica del color, es decir, el nombre del color comúnmente dicho, como rojo, amarillo, etc.
Saturación (S)Es la pureza del color, cuanto mayor sea, más puro será el color, y más se tornará gris, tomar 0-10Valor 0%.
Brillo (L) Tomar 0-100% aumenta el brillo, el color cambia hacia el blanco; reduce el brillo, el color cambia hacia el negro.
Transparencia (A) Valor 0~1 entre, representa la transparencia.
Versión de soporte: CSS3
Los números en la tabla representan la versión del navegador que admite la función por primera vez.
| Función | |||||
|---|---|---|---|---|---|
| hsla() | 1.0 | 9.0 | 1.0 | 3.1 | 9.5 |
hsla(tono, saturación, luminosidad, alpha)
| Valor | Descripción |
|---|---|
| tono - Tono | Define el tono (0 a 360) - 0 (o 360) es rojo, 120 es verde, 240 es azul |
| saturación - Saturación | Define la saturación; 0% es gris, 100% es de color completo |
| luminosidad - Brillo | Define el brillo 0% como oscuro, 50% es normal, 100% es blanco |
| alpha - Transparencia | Define la transparencia 0 (completamente transparente) ~ 1(completamente opaco) |
A continuación, se muestra un ejemplo de la repetición múltiple del mismo color (en la imagen de fondo), pero cada color tiene un valor alpha diferente.
Todos los demás valores son iguales (es decir, todas las líneas del tono, la saturación y la iluminación son iguales), solo cambia el canal alpha.
Esto indica que a medida que aumenta el valor alpha, la imagen de fondo se vuelve cada vez más invisible (las estrellas son la imagen de fondo).
hsla(240, 100%, 50%, 0) | |
hsla(240, 100%, 50%, 0.1) | |
hsla(240, 100%, 50%, 0.2) | |
hsla(240, 100%, 50%, 0.3) | |
hsla(240, 100%, 50%, 0.4) | |
hsla(240, 100%, 50%, 0.5) | |
hsla(240, 100%, 50%, 0.6) | |
hsla(240, 100%, 50%, 0.7) | |
hsla(240, 100%, 50%, 0.8) | |
hsla(240, 100%, 50%, 0.9) | |
hsla(240, 100%, 50%, 1) |
Comparado con el modelo RGB, el modelo de color HSL es más intuitivo en la configuración de colores. Sobre todo una vez que conoce el principio de funcionamiento del HSL.
He escrito sobre hsl() El contenido de la función, que explica hsla()La funcionalidad es más detallada aquí. Si no está seguro de cómo configurar y ajustar los colores base, revise.