So legen Sie die Transparenz von Bildern in CSS fest-CSS-Tutorial-php.cn

So legen Sie die Transparenz von Bildern in CSS fest

青灯夜游

Freigeben： 2023-01-05 16:10:22

Original

20989 Leute haben es durchsucht

So legen Sie die Bildtransparenz in CSS fest: 1. Verwenden Sie das Filterattribut, um dem Bildelement den Stil „filter:opacity(value%)“ hinzuzufügen. Der Wert liegt zwischen 0 und 100, „0%“ ist vollständig transparent. „100 %“, dann bleibt das Bild unverändert. 2. Verwenden Sie das opacity-Attribut, die Syntax „opacity: value“.

So legen Sie die Transparenz von Bildern in CSS fest

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

Methode 1: Verwenden Sie das Filterattribut – filter:opacity(%)

Das Filterattribut definiert (normalerweise) den visuellen Effekt des Elements (zum Beispiel: Unschärfe und Sättigung).

Deckkraft (%): wird zum Konvertieren der Transparenz des Bildes verwendet. 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>
			.img1{
				-webkit-filter: opacity(50%); /* Chrome, Safari, Opera */
				filter: opacity(50%);
				
			}
			.img2{
				-webkit-filter: opacity(20%); /* Chrome, Safari, Opera */
				filter: opacity(20%);
				
			}
		</style>
	</head>
	<body>
		<div>
			<p>原图：</p>
		　　<img  src="img/1.jpg"    style="max-width:90%"/ alt="So legen Sie die Transparenz von Bildern in CSS fest" >
		</div>
		<div>
			<p>透明度为50%：</p>
		　　<img  class="img1" src="img/1.jpg"    style="max-width:90%"/ alt="So legen Sie die Transparenz von Bildern in CSS fest" >
		</div>
		<div>
			<p>透明度为20%：</p>
		　　<img  class="img2" src="img/1.jpg"    style="max-width:90%"/ alt="So legen Sie die Transparenz von Bildern in CSS fest" >
		</div>
	</body>
</html>

Nach dem Login kopieren

Rendering:

So legen Sie die Transparenz von Bildern in CSS fest

Methode 2: Verwenden Sie das Opazitätsattribut

Opacity-Attribut, um den Transparenzgrad eines Elements festzulegen. Wertebereich: von 0,0 (vollständig transparent) bis 1,0 (vollständig undurchsichtig).

Beispiel:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.img1{
				opacity: 0.5;
				
			}
			.img2{
				opacity: 0.2;
				
			}
		</style>
	</head>
	<body>
		<div>
			<p>原图：</p>
		　　<img  src="img/1.jpg"    style="max-width:90%"/ alt="So legen Sie die Transparenz von Bildern in CSS fest" >
		</div>
		<div>
			<p>透明度为0.5：</p>
		　　<img  class="img1" src="img/1.jpg"    style="max-width:90%"/ alt="So legen Sie die Transparenz von Bildern in CSS fest" >
		</div>
		<div>
			<p>透明度为0.2：</p>
		　　<img  class="img2" src="img/1.jpg"    style="max-width:90%"/ alt="So legen Sie die Transparenz von Bildern in CSS fest" >
		</div>
	</body>
</html>

Nach dem Login kopieren

Rendering:

So legen Sie die Transparenz von Bildern in CSS fest

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo legen Sie die Transparenz von Bildern in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!