Lass uns anfangen.
So fügen Sie einem Element Transparenz hinzu
Sie können jedes Element machen (e.G. Bild), das auf Ihrer Website transparent erscheint, indem Sie der CSS -Opazitätseigenschaft des Elements einen bestimmten Wert zuweisen.
Beispiel
Um das Konzept der Transparenz zu verstehen, folgen Sie dem folgenden Beispiel.
Html
Hier haben wir ein Bild hinzugefügt und seine Breite auf 200px und Höhe auf 250px gesetzt.
CSS
imgDie Opazität des Bildes wurde auf 0 gesetzt.6.
Ausgang
Das Bild ist 60% undurchsichtig.
Notiz: Opazität und Transparenz sind gegenübereinander entgegengesetzt. Daher macht niedrige Werte der Opazitätseigenschaft das Element transparenter und umgekehrt.
Zum Beispiel, wenn wir die Deckkraft verringern und auf 0 setzen.2 So wie das.
imgDie Transparenz wird zunehmen.
Das Bild ist 20% undurchsichtig.
Hinzufügen eines Schwebeffekts zusammen mit Transparenz
Sie können einen Schwebeffekt hinzufügen und dem Bild eine gewisse Deckkraft zuweisen. Das Hinzufügen dieses Effekts ändert die Transparenz eines Bildes, wenn der Benutzer die Maus über ein bestimmtes Bild bringt.
Beispiel
Das folgende Beispiel zeigt, wie ein Schwebeffekt mit der Opazitätseigenschaft verwendet wird.
Html
Im obigen Code fügen wir ein Bild hinzu und geben ihm eine gewisse Breite und Höhe.
CSS
imgIm obigen CSS -Code weisen wir zunächst eine Deckkraft von 0 zu.4 Um das Bild transparent zu machen, fügen wir dem Bild mit Deckkraft einen Schwebeeffekt hinzu 1. Dies bedeutet, dass, wenn der Benutzer die Maus über das Bild bringt, nicht transparent und das Gegenteil auftritt, wenn der Mauszeiger vom Bild entfernt ist.
Ausgang
Ein Schwebeffekt wird dem Bild zusammen mit Transparenz erfolgreich hinzugefügt.
So fügen Sie einem Element und seinen Kindern Transparenz hinzu
Wenn Sie ein Element mit der Eigenschaft der Opazität Transparenz hinzufügen, erben die Kinder dieses bestimmten Elements auch Transparenz.
Beispiel
Hier werden wir demonstrieren, wie wir einem Element Transparenz hinzufügen können.
Html
Ich habe eine Deckkraft von 0.6
Ich habe eine Deckkraft von 1
Hier haben wir zwei Elemente erstellt, um klar zu machen, wie Transparenz für HTML -Elemente funktioniert.
CSS
div.OpazitätDas erste Div -Element hat eine Transparenz von 0.4 und das andere Element ist völlig nicht transparent.
Ausgang
Je transparenter ein Element, der Inhalt in diesem Element ist auch transparent.
Hinzufügen von Transparenz mit RGBA
Die RGBA -Farben werden verwendet, um die obige Situation zu vermeiden. Wenn Sie die Depazität auf ein Element anwenden, wird der Inhalt im Element auch transparent.
Beispiel
Verwenden Sie den folgenden Code, um zu verhindern, dass der in einem Element vorhandene Text transparent wird.
Html
Mit Opazitätseigenschaft
Mit RGBA -Farbe
Im obigen Code erstellen wir zwei Elemente. Dem ersten Div wurde eine Deckkraft von 0 zugewiesen.2 Um den Unterschied zwischen der Verwendung der Opazitätseigenschaft und der Verwendung von Opazitätseigenschaften zusammen mit RGBA -Farben zu demonstrieren.
CSS
div.rgbDem ersten DIV wurde eine rosa Hintergrundfarbe, die Polsterung von 15px und eine Deckkraft von 0 zugewiesen.2. Während dem zweiten Div die gleiche Hintergrundfarbe zusammen mit einer Deckkraft von 0 zugewiesen wurde.2 als viertes Argument in der RGBA -Methode.
Ausgang
Der Text im Element wird bei Transparenz mit RGBA -Farben nicht transparent.
Abschluss
Sie können verschiedene HTML. Diese Eigenschaft macht Werte von 0.0 bis 1.0, desto niedriger der Wert dieser Eigenschaft, desto mehr Transparenz. Zusammen mit Transparenz können Sie auch einen Schwebeffekt auf die Elemente hinzufügen. Verwenden Sie außerdem die RGBA -Farben, um zu verhindern, dass der Inhalt innerhalb eines Elements transparent wird, wenn Sie Transparenz hinzufügen. Dieser Beitrag führt Sie bei der Hinzufügung von Transparenz in CSS mithilfe von Opacity -Eigenschaften zusammen mit relevanten Beispielen.