html中如何設(shè)置字體透明度

發(fā)布時(shí)間：2021-12-24 09:37:15 來(lái)源：億速云閱讀：436 作者：小新欄目：web開發(fā)

小編給大家分享一下html中如何設(shè)置字體透明度，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

html中設(shè)置字體透明度的方法：1、利用color屬性和rgba()函數(shù)，語(yǔ)法為“字體元素{color: rgba(紅色值, 綠色值, 藍(lán)色值, 透明度值);}”；2、利用opacity屬性，語(yǔ)法“字體元素{opacity:透明度值;}”。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

1、利用color屬性和rgba()函數(shù)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.p1{
				color: rgba(0, 0, 0, 1);
			}
			.p2{
				color: rgba(0, 0, 0, 0.6);
			}
			.p3{
				color: rgba(0, 0, 0, 0.4);
			}
			.p4{
				color: rgba(0, 0, 0, 0.2);
			}
			
		</style>
	</head>
	<body bgcolor="#AFEEEE">
		<p class="p1">測(cè)試文本</p>
		<p class="p2">測(cè)試文本</p>
		<p class="p3">測(cè)試文本</p>
		<p class="p4">測(cè)試文本</p>
	</body>
</html>

html中如何設(shè)置字體透明度

2、利用opacity屬性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.p1{
				opacity:1;
			}
			.p2{
				opacity: 0.6;
			}
			.p3{
				opacity:0.4;
			}
			.p4{
				opacity:0.2;
			}
			
		</style>
	</head>
	<body bgcolor="#00aa7f">
		<p class="p1">測(cè)試文本</p>
		<p class="p2">測(cè)試文本</p>
		<p class="p3">測(cè)試文本</p>
		<p class="p4">測(cè)試文本</p>
	</body>
</html>

html中如何設(shè)置字體透明度

看完了這篇文章，相信你對(duì)“html中如何設(shè)置字體透明度”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

html中如何設(shè)置字體透明度

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽