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“.
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>Rendering:
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>Rendering:
(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!
