Rumah  >  Artikel  >  hujung hadapan web  >  Adakah css3 menyokong rgba?

Adakah css3 menyokong rgba?

WBOY
WBOYasal
2022-03-29 17:51:211863semak imbas

css3 menyokong rgba; fungsi rgba() ialah fungsi dalam css3 yang menggunakan superposisi merah, hijau, biru dan ketelusan untuk menghasilkan pelbagai warna ialah "0 hingga 255" atau "0% hingga 100%", manakala julat nilai ketelusan ialah 0 hingga 1, dan sintaksnya ialah "rgba (merah, hijau, biru, ketelusan)".

Adakah css3 menyokong rgba?

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

Adakah css3 menyokong rgba?

Fungsi rgba() menggunakan superposisi merah (R), hijau (G), biru (B) dan ketelusan (A) untuk menjana pelbagai daripada warna. Versi yang disokong: CSS3

RGBA bermaksud merah, hijau, biru, ketelusan (Bahasa Inggeris: Red, Green, Blue, Alpha).

Warna dalam CSS ditakrifkan dalam tiga cara: menggunakan kaedah warna (RGB, RGBA, HSL, HSLA), nilai warna heksadesimal dan nama warna yang dipratentukan.

Sintaks CSS

rgba(red, green, blue, alpha)
  • merah mentakrifkan nilai merah, julat nilai ialah 0 ~ 255, anda juga boleh menggunakan peratusan 0 % ~ 100 %.

  • hijau mentakrifkan nilai hijau, julat nilai ialah 0 ~ 255, anda juga boleh menggunakan peratusan 0% ~ 100%.

  • biru mentakrifkan nilai biru, julat nilai ialah 0 ~ 255, anda juga boleh menggunakan peratusan 0% ~ 100%.

  • alfa - Ketelusan Takrifkan ketelusan 0 (telus sepenuhnya) ~ 1 (legap sepenuhnya)

Contohnya adalah seperti berikut:

<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}
</style>
</head>
<body>
<p>RGB 颜色,并使用透明度:</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>

Hasil keluaran:

Adakah css3 menyokong rgba?

(Mempelajari perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Adakah css3 menyokong rgba?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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