suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >So legen Sie die Transparenz des HTML-IMG-Bildes fest

So legen Sie die Transparenz des HTML-IMG-Bildes fest

青灯夜游
青灯夜游Original
2021-02-22 12:04:589810Durchsuche

So stellen Sie die Transparenz von HTML-IMG-Bildern ein: 1. Legen Sie den „Opacity:value;“-Stil für das IMG-Bild fest. Der Wert liegt zwischen 0,0 (vollständig transparent) und 1,0 (vollständig undurchsichtig). :" für das IMG-Bild. Deckkraft(%);"

So legen Sie die Transparenz des HTML-IMG-Bildes fest

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5- und CSS3-Version, Dell G3-Computer.

HTML-IMG-Bildeinstellungstransparenz

Methode 1: Verwenden Sie die Deckkraft, um die Bildtransparenz festzulegen

Das Opacity-Attribut legt den Transparenzgrad eines Elements fest.

Syntax: 

opacity: value;

Attributwert:

  • Wert: Deckkraft angeben. Von 0,0 (vollständig transparent) bis 1,0 (vollständig undurchsichtig)

Beispiel: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.img2{
				opacity: 0.5;
			}
		</style>
	</head>
	<body>
		<div>
			<p>原图：</p>
		　　<img  src="demo/img/5.jpg"    style="max-width:90%"/ alt="So legen Sie die Transparenz des HTML-IMG-Bildes fest" >
		</div>
		<div>
			<p>设置透明度的图：</p>
		　　<img  class="img2" src="demo/img/5.jpg"    style="max-width:90%"/ alt="So legen Sie die Transparenz des HTML-IMG-Bildes fest" >
		</div>
	</body>
</html>

Rendering:

So legen Sie die Transparenz des HTML-IMG-Bildes fest

[Empfohlene Tutorials: CSS-Video-Tutorial, „HTML-Video-Tutorial“]

Methode 2: Filter verwenden: Deckkraft (%)

Das Filterattribut definiert den visuellen Effekt (zum Beispiel: Unschärfe und Sättigung) des Elements (normalerweise So legen Sie die Transparenz des HTML-IMG-Bildes fest).

Deckkraft (%): Wandelt die Transparenz des Bildes um. Der Wert definiert den Umfang der Konvertierung. Ein Wert von 0 % bedeutet vollständige Transparenz, ein Wert von 100 % bedeutet keine Veränderung des Bildes. Werte zwischen 0 % und 100 % sind lineare Multiplikatoren des Effekts, äquivalent zur Multiplikation der Anzahl der Bildbeispiele. Wenn der Wert nicht festgelegt ist, ist der Wert standardmäßig 1. Diese Funktion ist dem vorhandenen Opazitätsattribut sehr ähnlich, mit der Ausnahme, dass einige Browser über den Filter eine Hardwarebeschleunigung bereitstellen, um die Leistung zu verbessern.

Beispiel: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.img2{
				-webkit-filter: opacity(100%); /* Chrome, Safari, Opera */
				filter: opacity(20%);
				
			}
		</style>
	</head>
	<body>
		<div>
			<p>原图：</p>
		　　<img  src="demo/img/5.jpg"    style="max-width:90%"/ alt="So legen Sie die Transparenz des HTML-IMG-Bildes fest" >
		</div>
		<div>
			<p>设置透明度的图：</p>
		　　<img  class="img2" src="demo/img/5.jpg"    style="max-width:90%"/ alt="So legen Sie die Transparenz des HTML-IMG-Bildes fest" >
		</div>
	</body>
</html>

Rendering:

So legen Sie die Transparenz des HTML-IMG-Bildes fest

Weitere Programmierkenntnisse finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonSo legen Sie die Transparenz des HTML-IMG-Bildes fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css css3 html Filter
Stellungnahme：
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
Vorheriger Artikel：So platzieren Sie Text in HTML auf der BildoberflächeNächster Artikel：So platzieren Sie Text in HTML auf der Bildoberfläche

In Verbindung stehende Artikel

Mehr sehen