cari

Rumah  >  Artikel  >  hujung hadapan web  >  Apakah kegunaan hsla() dalam css3

Apakah kegunaan hsla() dalam css3

青灯夜游
青灯夜游asal
2022-03-17 18:32:241962semak imbas

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)
值 描述
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>

Apakah kegunaan hsla() dalam css3

(Belajar perkongsian video :tutorial video css, bahagian hadapan web)

Atas ialah kandungan terperinci Apakah kegunaan hsla() dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css css3
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Apakah penapis yang disokong oleh css3?Artikel seterusnya：Apakah penapis yang disokong oleh css3?

Artikel berkaitan

Lihat lagi