search

Home  >  Article  >  Web Front-end  >  How to make words change transparency in css

How to make words change transparency in css

青灯夜游
青灯夜游Original
2021-09-13 17:05:0811838browse

How to change the transparency of words in css: 1. Use the opacity attribute to add the "opacity: transparency value;" style to the text element; 2. Use the rgba() function to add "color:" to the text element. rgba(red, green, blue, transparency value);" style is enough.

How to make words change transparency in css

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

css changes the transparency of words

Method 1. Use the opacity attribute

<!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>

How to make words change transparency in css

The Opacity property sets the transparency level of an element.

Syntax: 

opacity: value;

value: Specifies opacity. From 0.0 (fully transparent) to 1.0 (fully opaque).

Method 2: Use rgba() function 

<!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>

Rendering:

How to make words change transparency in css

##rgba( ) function uses the superposition of red (R), green (G), blue (B), and transparency (A) to generate a variety of colors.

Syntax:


rgba(red, green, blue, alpha)

Attribute value:

##Value#redgreenbluealpha - Transparency (Learning video sharing:
Description
Define the red value, the value range is 0 ~ 255, you can also use the percentage 0% ~ 100%.
Define the green value, the value range is 0 ~ 255, you can also use the percentage 0% ~ 100%.
Define the blue value, the value range is 0 ~ 255, you can also use the percentage 0% ~ 100%.
Define transparency 0 (fully transparent) ~ 1 (fully opaque)
css video tutorial

)

The above is the detailed content of How to make words change transparency in css. 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
Previous article：How to write hexagon in cssNext article：How to write hexagon in css

Related articles

See more