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)".
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
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:
(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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
