Manuale di Referenza CSS

Regole @ di CSS

Completo delle Proprietà CSS

Funzione hsla() di CSS

Esempio Online

Definire il colore HSL e impostare l'opacità:

Esempio

<!DOCTYPE　html>
<title>Manuale di Base(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>

Prova a vedere ‹/›

Definizione e uso

La funzione hsla() utilizza il tono, la saturazione, la luminosità, l'opacità per definire il colore.

HSL è il tono, la saturazione, la luminosità, l'opacità (in inglese: Hue, Saturation, Lightness, Alpha).

Tono (H)È l'attributo di base del colore, è quello che comunemente chiamiamo nome del colore, come rosso, giallo ecc.
Saturazione (S)Si riferisce alla purezza del colore, più alta è la purezza del colore, più il colore è puro, più bassa diventa più grigio, il valore è tra 0-100%.
Luminosità (L) Scegliere tra 0-100%, aumenta la luminosità, il colore diventa più bianco; riduce la luminosità, il colore diventa più nero.
Opacità (A) Valore tra 0~1, rappresenta l'opacità.

Versioni supportate: CSS3

Compatibilità del browser

I numeri nella tabella rappresentano la versione del browser che supporta la funzione per la prima volta.

Funzione
hsla()	1.0	9.0	1.0	3.1	9.5

Sintassi CSS

hsla(hue,　saturation,　luminosità,　alpha)

Valore	Descrizione
tono - tono di colore	Definire il tono di colore (da 0 a 360) - 0 (o 360) come rosso, 120 come verde, 240 come blu
saturazione - saturazione	Definire la saturazione; 0% come grigio, 100% come colore pieno
luminosità - luminosità	Definire la luminosità 0% come scura, 50% come normale, 100% come bianca
alpha - trasparenza	Definire la trasparenza 0 (trasparente) ~ 1 (opaco)

Variazioni di alpha

Ecco un esempio di ripetizione multipla dello stesso colore (sullo sfondo dell'immagine), ma con valori alpha diversi per ogni colore.

Tutti gli altri valori sono gli stessi (cioè, tutte le righe del tono, della saturazione e dell'illuminazione sono le stesse), ma cambia solo il canale alpha.

Questo indica che man mano che il valore alpha aumenta, l'immagine di sfondo diventa sempre meno visibile (le stelle sono l'immagine di sfondo).

Blu

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

Impostare HSL

Confronto tra il modello di colore RGB e il modello di colore HSL, il modello di colore HSL è più intuitivo per impostare i colori. Soprattutto una volta che conosci il funzionamento dell'HSL.

Ho scritto qualcosa su hsl() Il contenuto della funzione, che spiega hsla()Le funzioni sono più dettagliate di quanto scritto qui. Se non sei sicuro di come impostare e regolamentare il colore di base, controlla.

Funzione CSS

Regola @charset CSS Funzioni CSS