Apakah kegunaan hsla() dalam css3-Soal Jawab bahagian hadapan-php.cn

Apakah kegunaan hsla() dalam css3

青灯夜游

Lepaskan： 2022-03-17 18:34:20

asal

1963 orang telah melayarinya

Dalam CSS3, fungsi hsla() digunakan untuk mentakrifkan warna menggunakan warna, ketepuan, kecerahan dan ketelusan nilai Julat nilai ialah "0~360", julat nilai ketepuan dan kecerahan ialah "0%~100%", dan julat nilai ketelusan ialah "0~1".

Apakah kegunaan hsla() dalam css3

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Dalam css3, fungsi hsla() adalah untuk menentukan warna.

fungsi hsla() menggunakan warna, ketepuan, kecerahan dan ketelusan untuk menentukan warna.

HSLA bermaksud Hue, Saturation, Lightness, Alpha (Bahasa Inggeris: Hue, Saturation, Lightness, Alpha).

Hue (H) ialah sifat asas warna, yang biasanya kita panggil nama warna, seperti merah, kuning, dll.
Ketepuan (S) merujuk kepada ketulenan warna. Semakin tinggi, semakin tulen warna itu, warna itu beransur-ansur menjadi kelabu sebanyak 0-100%.
Kecerahan (L) mengambil masa 0-100%.
Ketelusan (A) mengambil nilai antara 0 dan 1, mewakili ketelusan.

Tatabahasa:

hsla(hue, saturation, lightness, alpha)

Salin selepas log masuk

值	描述
hue - 色相	定义色相 (0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色
saturation - 饱和度	定义饱和度; 0% 为灰色， 100% 全色
lightness - 亮度	定义亮度 0% 为暗, 50% 为普通, 100% 为白
alpha - 透明度	定义透明度 0（透完全明） ~ 1（完全不透明）

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
</head>

<body>
<p>HSL 颜色，并使用透明度:</p>
<p id="p1">绿色</p>
<p id="p2">浅绿</p>
<p id="p3">暗绿</p>
<p id="p4">柔和的绿色</p>
<p id="p5">紫色</p>
<p id="p6">柔和的紫色</p>
</body>
</html>

Salin selepas log masuk

Apakah kegunaan hsla() dalam css3