Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So ändern Sie die Transparenz von Wörtern in CSS

青灯夜游
Freigeben: 2023-01-11 09:19:52
Original
11842 Leute haben es durchsucht

So ändern Sie die Transparenz von Wörtern in CSS: 1. Verwenden Sie das opacity-Attribut, um dem Textelement den Stil „opacity:transparency value;“ hinzuzufügen , Grün, Blau, Transparenzwert);“-Stil ist ausreichend.

So ändern Sie die Transparenz von Wörtern in CSS

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer. Mit CSS können Wörter ihre Transparenz ändern.

Syntax:

<!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>
Nach dem Login kopieren
Wert: Deckkraft angeben. Von 0,0 (vollständig transparent) bis 1,0 (vollständig undurchsichtig).

Methode 2: Verwenden Sie die Funktion rgba()

opacity: value;
Nach dem Login kopieren
Rendering:

So ändern Sie die Transparenz von Wörtern in CSS

Die Funktion rgba() verwendet die Überlagerung von Rot (R), Grün (G), Blau (B) und Transparenz (A ), um eine Vielzahl von Farben zu erzeugen.

Syntax:

<!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>
Nach dem Login kopieren

Attributwert:


Wert

BeschreibungSo ändern Sie die Transparenz von Wörtern in CSS

rot

Definieren Sie den roten Wert, der Wertebereich liegt zwischen 0 und 255 Verwenden Sie auch den Prozentsatz 0 % ~ 100 % .

Definieren Sie den Grünwert. Der Wertebereich liegt zwischen 0 und 255. Sie können auch den Prozentsatz zwischen 0 und 100 % verwenden. Definieren Sie den Blauwert. Der Wertebereich liegt zwischen 0 und 255. Sie können auch den Prozentsatz zwischen 0 und 100 % verwenden. Definieren Sie Transparenz 0 (vollständig transparent) ~ 1 (vollständig undurchsichtig) CSS-Video-Tutorial
Grün
blau
alpha – Transparenz
(Lernvideo-Sharing: )

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Transparenz von Wörtern in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage