Home  >  Article  >  Web Front-end  >  How to set font transparency in html

How to set font transparency in html

青灯夜游
青灯夜游Original
2021-12-23 18:02:5511740browse

How to set font transparency in html: 1. Use the color attribute and rgba() function, the syntax is "font element {color: rgba(red value, green value, blue value, transparency value);} "; 2. Use the opacity attribute, the syntax "font element {opacity: transparency value;}".

How to set font transparency in html

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

How to set font transparency in html:

1. Use the color attribute and rgba() function

<!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">测试文本</p>
		<p class="p2">测试文本</p>
		<p class="p3">测试文本</p>
		<p class="p4">测试文本</p>
	</body>
</html>

How to set font transparency in html

2. Use the opacity attribute

<!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">测试文本</p>
		<p class="p2">测试文本</p>
		<p class="p3">测试文本</p>
		<p class="p4">测试文本</p>
	</body>
</html>

How to set font transparency in html

Related recommendations: "html video Tutorial

The above is the detailed content of How to set font transparency in html. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn