So legen Sie die Transparenz des HTML-IMG-Bildes fest-Front-End-Fragen und Antworten-php.cn

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

青灯夜游

Freigeben： 2023-01-03 09:24:19

Original

9806 Leute haben es durchsucht

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;

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!