Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Adakah rgba atribut baharu dalam css3?

Adakah rgba atribut baharu dalam css3?

WBOY
Lepaskan: 2022-01-24 14:35:06
asal
2797 orang telah melayarinya

Dalam CSS3, rgba() ialah atribut baharu CSS3 Fungsi ini digunakan untuk menjana pelbagai warna menggunakan superposisi merah, hijau, biru dan ketelusan Sintaksnya ialah "rgba(merah, hijau, biru , alfa)”.

Adakah rgba atribut baharu dalam css3?

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

Adakah rgba atribut baharu dalam css3?

Rgba ialah atribut baharu dalam css3.

Fungsi rgba() menggunakan superposisi merah (R), hijau (G), biru (B) dan ketelusan (A) untuk menjana pelbagai warna.

RGBA bermaksud Merah, Hijau, Biru, Alfa.

  • Merah (R) Integer antara 0 dan 255, mewakili komponen merah warna. .

  • Hijau (G) Integer antara 0 dan 255, mewakili komponen hijau warna.

  • Biru (B) Integer antara 0 dan 255, mewakili komponen biru warna.

  • Ketelusan (A) berjulat dari 0 hingga 1, mewakili ketelusan.

Versi yang disokong: CSS3

Sintaksnya ialah:

rgba(red, green, blue, alpha)
Salin selepas log masuk

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>
Salin selepas log masuk

Hasil keluaran:

Adakah rgba atribut baharu dalam css3?

(Mempelajari perkongsian video: tutorial video css)

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

Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan