CSS Reference Manual

CSS @rules (RULES)

Complete list of CSS attributes

CSS hsla() 函数

在线示例

定义 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>

Teste e veja ‹/›

Definição e uso

A função hsla() usa tom, saturação, brilho e transparência para definir cores.

HSL é tom, saturação, brilho, transparência (em inglês: Hue, Saturation, Lightness, Alpha).

Tom (H)É a propriedade básica da cor, que é o que chamamos de nome da cor comum, como vermelho, amarelo, etc.
Saturação (S)É a pureza da cor, quanto maior a pureza da cor, mais pura é a cor, mais baixa gradualmente se torna cinza, pegue 0-10O valor de 0%.
Brilho (L) Pega 0-100%, aumenta a brilho, a cor mudará para o branco; diminui a brilho, a cor mudará para o preto.
Transparência (A) Valores de 0~1 entre, representa a transparência.

Versão suportada: CSS3

Compatibilidade do navegador

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

Função
hsla()	1.0	9.0	1.0	3.1	9.5

Sintaxe CSS

hsla(hue, saturação, iluminância, alpha)

Valor	Descrição
hue - Tom	Define o tom (0 a 360) - 0 (ou 360) é vermelho, 120 é verde, 240 é azul
saturation - Saturação	Define a saturação; 0% é cinza, 100% é todas as cores
lightness - Brilho	Define a brilho 0% como escuro, 50% é normal, 100% é branco
alpha - Transparência	Define a transparência 0 (completamente transparente) ~ 1(Incompletamente opaco)

Variações Alpha

A seguir está um exemplo de repetição múltipla da mesma cor (na imagem de fundo), mas cada cor tem um valor alpha diferente.

Todos os outros valores são iguais (ou seja, todas as linhas do tom, saturação e iluminância são iguais), apenas o canal alpha muda.

Isso indica que à medida que o valor alpha aumenta, a imagem de fundo torna-se cada vez mais invisível (as estrelas são a imagem de fundo).

Azul

`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)`

Configurar HSL

Comparado ao modelo RGB, o modelo de cor HSL é mais intuitivo ao definir cores. Especialmente quando você conhece o funcionamento do HSL.

Eu já escrevi sobre hsl() O conteúdo da função explica hsla()A função detalha mais. Se você não tem certeza de como configurar e ajustar as cores básicas, verifique.

Função CSS

Regra @charset do CSS Funções CSS