Deckkraft von HTML-Bildern
Die Bildopazität soll ein Bild erzeugen, das mit der Zeit ein- oder ausgeblendet wird. Dies kann verwendet werden, um einen fließenden Übergang zwischen zwei Bildern zu erstellen oder eine Animation zu erstellen.
Die Bildopazität kann auch verwendet werden, um ein Geisterbild zu erstellen. Dieses Bild ist kaum sichtbar und dient dekorativen Zwecken.
Auch die Bildopazität kann verwendet werden, um ein Negativbild zu erzeugen. Dieses Bild ist das Gegenteil eines Standardbildes und kann für Spezialeffekte verwendet werden.
Deckkraft von HTML-Bildern
Deckkraft ist ein Effekt eines Bildes, der angibt, wie undurchsichtig oder transparent ein Bild ist. Ein Bild mit einer Deckkraft von 0 ist vollständig transparent, während ein Bild mit einer Deckkraft von 1 vollständig undurchsichtig ist.
Die Opazität kann entweder mit einem Zahlenwert zwischen 0 und 1 oder einem Prozentwert zwischen 0% und 100% angegeben werden.
Wenn ein Bild eine Deckkraft von weniger als 1 hat, ist das Bild teilweise transparent, sodass der Hintergrund durchscheinen kann. Dadurch können verschiedene spannende Effekte entstehen, wie zum Beispiel das Übereinanderlegen von Bildern oder das scheinbare Verschwinden eines Bildes im Hintergrund.
Die HTML-Bild-Eigenschaft opacity wird verwendet, um die Deckkraft eines Bildes auf einer Webseite zu steuern. Dies kann nützlich sein, um Effekte zu erstellen, z. B. ein Bild in den Hintergrund tauchen oder über einem anderen Bild geschichtet erscheinen zu lassen.
Sehen wir uns ein Beispiel an; Angenommen, Sie möchten ein Bild zu 50% undurchsichtig machen, würden Sie die Opazität auf 0.5 setzen; außerdem kann man mit dem Farbwert rgba() auch die Opazität einstellen.
img {
opacity: 0.5;
}
Sie können die Opazitätseigenschaft auch mit der Pseudoklasse hover kombinieren, um Bilder zu erstellen, die mit ihr verblassen oder sich ausblenden, wenn sich die Maus darüber befindet. Zum Beispiel könnten Sie die Opazität eines Bildes auf 0.5 beim hover wie folgt einstellen:
img:hover {
opacity: 0.5;
}
Dadurch würde das Bild halbtransparent erscheinen, wobei der Hintergrund dahinter sichtbar wäre.
<!DOCTYPE html>
<html>
<head>
<style>
div.bg {
background: url(Please add image link here) repeat;
border: 2px solid black;
}
div.ax {
margin: 35px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.ax p {
margin: 10%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="bg">
<div class="ax">
<p>There is some text that is present in this transparent box.</p>
</div>
</div>
</body>
</html>
Abschluss
Die Deckkraft eines Bildes in HTML kann über die Eigenschaft opacity gesteuert werden. Diese Eigenschaft kann auf 0 und 1 gesetzt werden, wobei 0 vollständig transparent und Eins vollständig undurchsichtig ist.
Wenn Sie also ein Bild zu 50% deckend machen möchten, können Sie den Farbwert rgba() mit einer Deckkraft von 0.5 verwenden.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn