Rumah > hujung hadapan web > tutorial css > Bagaimana untuk membuat perkataan menukar ketelusan dalam css

Bagaimana untuk membuat perkataan menukar ketelusan dalam css

青灯夜游
Lepaskan: 2023-01-11 09:19:52
asal
11859 orang telah melayarinya

Cara menukar ketelusan teks dalam css: 1. Gunakan atribut opacity untuk menambah gaya "opacity: transparency value;" pada elemen teks; 2. Gunakan fungsi rgba() untuk menambah "color :" ke elemen teks. rgba(merah, hijau, biru, nilai ketelusan);"

Bagaimana untuk membuat perkataan menukar ketelusan dalam css

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

css menukar ketelusan perkataan

Kaedah 1. Gunakan atribut kelegapan

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<div style="opacity:1;">测试文字</div>
		<div style="opacity:0.5;">测试文字</div>
		<div style="opacity:0.2;">测试文字</div>
	</body>
</html>
Salin selepas log masuk

Bagaimana untuk membuat perkataan menukar ketelusan dalam css

Atribut Opacity menetapkan tahap ketelusan sesuatu elemen.

Sintaks:

opacity: value;
Salin selepas log masuk

nilai: Tentukan kelegapan. Daripada 0.0 (lutsinar sepenuhnya) kepada 1.0 (legap sepenuhnya).

Kaedah 2: Gunakan fungsi rgba()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<div style="color: rgba(255,0,0,1)">测试文字</div>
		<div style="color: rgba(255,0,0,0.5)">测试文字</div>
		<div style="color: rgba(255,0,0,0.2)">测试文字</div>
	</body>
</html>
Salin selepas log masuk

Rendering:

Bagaimana untuk membuat perkataan menukar ketelusan dalam css

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

Sintaks:

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

Nilai atribut:

描述
red 定义红色值,取值范围为 0 ~ 255,也可以使用百分比 0% ~ 100%。
green 定义绿色值,取值范围为 0 ~ 255,也可以使用百分比 0% ~ 100%。
blue 定义蓝色值,取值范围为 0 ~ 255,也可以使用百分比 0% ~ 100%。
alpha - 透明度 定义透明度 0(完全透明) ~ 1(完全不透明)

(Belajar perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk membuat perkataan menukar ketelusan dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
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