Home > Web Front-end > Front-end Q&A > How to set font transparency in html

How to set font transparency in html

青灯夜游
Release: 2021-12-23 18:02:55
Original
11817 people have browsed it

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>
Copy after login

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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template