Wie füge ich einem Bild beim Schweben mit CSS eine transparente Überlagerung hinzu?

So fügen Sie einem Bild beim Schweben mit CSS eine transparente Überlagerung hinzu

Das Hinzufügen einer transparenten schwarzen Überlagerung zu einem Bild beim Schweben mit CSS ist eine Technik, die verwendet wird, um Aufmerksamkeit zu erregen auf bestimmte Bereiche eines Bildes oder um einen subtilen interaktiven Effekt zu erzeugen. Auch wenn es scheinbar unkompliziert ist, kann es zu Herausforderungen führen, wenn Sie nicht mit dem Innenleben des CSS-Box-Modells vertraut sind.

In dieser Diskussion werden wir uns mit den Gründen befassen, warum das bereitgestellte Code-Snippet das nicht erreicht gewünschte Ergebnis und erkunden Sie dann eine praktikable Lösung.

Das Problem verstehen

Der ursprüngliche Code versucht, den Overlay-Effekt mithilfe einer Kombination aus Divs und zu erzielen die Pseudoklasse :hover. Es gibt jedoch einige Probleme mit dem Ansatz:

1. Eingeschlossenes img-Element: CSS-Pseudoelemente können nicht direkt zu img-Elementen hinzugefügt werden, die in anderen Elementen wie div eingeschlossen sind.
2. Position und Anzeige: Das Overlay-Element verwendet fälschlicherweise display: none; zum Verstecken statt Deckkraft: 0; oder Sichtbarkeit: versteckt;.

Implementieren des Overlays mit Pseudoelementen

Um den Overlay-Effekt anzuwenden, ist es praktischer, CSS-Pseudoelemente anstelle separater Divs zu verwenden. Pseudoelemente ermöglichen eine nahtlose Integration in das Element, an das sie angehängt sind, was sie ideal für dieses Szenario macht.

1. Wrap the img: Wie bereits erwähnt, können Pseudoelemente dies tun Sie dürfen nicht direkt auf den IMG-Elementen selbst platziert werden. Daher ist es notwendig, das Bild in ein übergeordnetes Element einzuschließen.
2. Positionierung des übergeordneten Elements: Stellen Sie sicher, dass das übergeordnete Element (in diesem Fall das Bild) eine definierte Position (normalerweise relativ oder absolut) hat fungieren als Referenzpunkt für das Overlay.
3. Erstellen Sie das :after-Pseudoelement: Fügen Sie ein :after-Pseudoelement zum hinzu übergeordnetes Element (Bild) und legen Sie dessen Inhalt, Position und Hintergrundfarbe wie gewünscht für den Overlay-Effekt fest.
4. Übergang: Damit das Overlay beim Schweben angezeigt wird, fügen Sie eine Übergangseigenschaft in das ein :after-Pseudoelement, um zu steuern, wie es sich im Laufe der Zeit ändert.
5. Überlagerung auslösen: Verwenden Sie die :hover-Pseudoklasse, um das auszulösen Erscheinungsbild des Overlays durch Ändern der Deckkraft oder Sichtbarkeit des :after-Pseudoelements.

Overlays mit Text

Um beim Hover Text zum Overlay hinzuzufügen, können Sie die Content-Eigenschaft von verwenden das Pseudoelement und stellen den gewünschten Textinhalt bereit. Durch die Nutzung von attr(data-content) können Sie den Text für jedes Bild spezifisch gestalten, indem Sie dem übergeordneten Element ein data-content-Attribut hinzufügen.

Fazit

Das Anwenden eines transparenten Overlay-Effekts auf ein Bild beim Hover nur mit CSS erfordert ein Verständnis des CSS-Box-Modells und der leistungsstarken Fähigkeiten von Pseudoelementen. Durch die Implementierung der in diesem Artikel erläuterten Techniken können Sie interaktive und optisch ansprechende Overlays erstellen, die die Benutzerinteraktion mit Ihren Bildern verbessern.

Das obige ist der detaillierte Inhalt vonWie füge ich einem Bild beim Schweben mit CSS eine transparente Überlagerung hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!