Opazität in CSS ist eine Eigenschaft, die angibt, die Transparenz von Elementen wie zu steuern Inhalt oder Bilder . Mit dieser Eigenschaft können wir alle Bilder so einstellen, dass sie vollständig undurchsichtig sind ( sichtbar ), vollständig transparent ( versteckt ) oder durchscheinend (teilweise sichtbar). Es nimmt einen numerischen Wert an, der zwischen 0 und 1 liegt. Dabei definiert 0 vollständig transparent und 1 vollständig sichtbar. Deckkraftwerte zwischen 0 und 1, z. B. 0,2, 0,4, 0,6 usw., ändern ein Bild von transparent zu undurchsichtig, indem der Dezimalwert schrittweise erhöht wird.
Syntax
opacity :
Der numerische Wert muss zwischen 0 und 1 liegen, um das Bild halbtransparent zu machen. Wenn wir 1 angeben, ist das Bild undurchsichtig. Wenn der numerische Wert 0 ist, wird das Bild vollständig transparent.
Arrayliste sortiert
Beispiel 1 : In diesem Beispiel verwenden wir die Eigenschaft opacity, um das Element transparent zu machen, wenn wir mit der Maus über das Element fahren.
Main.html
Simple example to display the Opacity .get { background: red; width: 300px; height: 250px; border: none; color: white; padding: 16px 32px; text-align: center; font-size: 16px; margin: 4px 2px; } .get:hover { // hover is used to show the impact on element when the mouse on the element. opacity: 0.5; // set the opacity value to 0.5 } // use of class in CSS. Ausgabe
Bewegen Sie den Mauszeiger über das rote Feld, um einen transparenten oder undurchsichtigen Effekt anzuzeigen.
Übergangsdeckkraft in CSS
In CSS, a Übergangsopazität ist eine Eigenschaft, die verwendet wird, um den Deckkraftzustand reibungslos von einer Ebene in einen anderen Zustand zu ändern. Dies bedeutet, dass die Übergangsopazität den Zustand des undurchsichtigen Elements für eine definierte Zeitdauer in transparent ändert. Der Übergang verfügt über vier Eigenschaften: „transition-property“, „transition-duration“, „transition-timing-function“ und „transition-delay“, mit denen der Opazitätseffekt auf ein Bild angewendet wird. Der Übergangszeit ist eine wichtige Eigenschaft für allmähliche oder plötzliche Änderungen, die den Opazitätseffekt eines Elements über einen definierten Zeitraum in Millisekunden oder Sekunden widerspiegeln.
Welche Monate sind im dritten Quartal?
Die Abkürzungseigenschaft des Übergangs lautet wie folgt:
transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay];
Syntax zum Definieren der Übergangsdeckkraft in CSS
{ transition: opacity 5s; opacity: 1; // set opacity property to 1, completely visible } Or { transition: opacity 0.3s linear 2s; // effect on 0.3 millisecond } Übergangseigentum
Im Folgenden sind die Übergangseigenschaften aufgeführt, die zur Steuerung der Übergangseffekte verwendet werden.
| Wert | Beschreibung |
|---|---|
| Übergang- Eigentum | Es wird verwendet, um den Namen der CSS-Eigenschaft zu definieren, die den Übergangseffekt für Bilder anzeigt. |
| Übergangszeit | Es wird verwendet, um den Zeitraum in Sekunden oder Millisekunden zu definieren, in dem der Übergangseffekt angezeigt wird. |
| Übergangs-Timing-Funktion | Es wird verwendet, um die Geschwindigkeitskurve auf einem Bild zu definieren, um den Übergangseffekt anzuzeigen. |
| Übergang- Verzögerung | Gibt an, ob der Übergangseffekt für das Element oder das Bild initiiert wird. |
Hinweis: Beim Festlegen der Eigenschaft „Übergang“ auf das Bild oder den Inhalt müssen wir die Eigenschaft „Übergangsdauer“ definieren. Andernfalls wird die Dauer auf 0 gesetzt und es wird keine Wirkung angezeigt.
Die Notwendigkeit einer Übergangsdeckkraft in CSS
Der Opazität ist eine einfache CSS-Eigenschaft, mit der Sie die Transparenz eines Bildes steuern können, indem Sie den Deckkraftbereich von 0 bis 1 festlegen. Sie spiegelt die statische oder plötzliche Änderung eines Elements wider, um den Deckkrafteffekt anzuzeigen. Wenn wir beispielsweise ein Bild transparent anzeigen möchten, müssen wir den Opazitätswert von 0 auf 1 setzen. Danach wird der Opazitätseffekt sofort angezeigt, anstatt dass es einige Zeit in Anspruch nimmt. Deshalb verwenden wir a Übergangsopazität in CSS, das die Transparenz eines Elements über einen definierten Zeitraum steuert. Mithilfe der Übergangszeitfunktion in der Übergangsopazität können wir die Geschwindigkeitskurve eines Elements bestimmen, die den schnellen Opazitätseffekt auf ein Bild angibt. Auf diese Weise nutzen wir den Übergangs-Opazitätseffekt, um Änderungen im angegebenen Zeitraum widerzuspiegeln, anstatt sofort einzutreten.
Beispiel 2: In diesem Beispiel verwenden wir die Übergangs-Opazitätseigenschaft, die den Opazitätseffekt in einer bestimmten Zeitdauer und nicht sofort widerspiegelt.
Datei1.html
CSS transition opacity Property .pr{ width: 400px; height: 300px; background: lightgreen; position: relative; } .cr{ width: 270px; height: 200px; position: absolute; /* top: 30px; */ left: 30px; color: white; margin: 40px auto; margin-bottom: 30px; font-family: Arial, Helvetica, sans-serif; background: red; font-weight: Bold; font-size: 36px; opacity: 0; } .cr:hover { opacity: 1; transition: opacity 2s ease-out; /* It slowly shows the element as we place the mouse on the box and when the time reaches 2 seconds, it is fully visible. */ -webkit-transition: opacity 2s ease-out; -moz-transition: opacity 2s ease-in-out; } JavaTpoint: Best Tutorial Site Check link is working <br> <p> https://www.javatpoint.com/ </p> Ausgabe
