So erstellen Sie ein Bild-Overlay-Symbol mit HTML und CSS

Übersicht

Bildüberlagerung ist die Überlagerung von zwei Bildern oder Symbolen, wobei ein Symbol oder Bild auf dem Bildschirm angezeigt wird, während das andere Symbol auf dem Bildschirm angezeigt wird, wenn der Cursor über dem ersten Bild schwebt. Um diese Funktion zu implementieren, sollten wir über Grundkenntnisse in HTML und CSS sowie deren Eigenschaften für Übergänge und Animationen verfügen. Um also ein Overlay zu erstellen, sehen wir uns einige Beispiele für die Erstellung eines inneren Overlay-Symbols an.

Algorithmus

Schritt 1 – Erstellen Sie eine HTML-Datei in einem Texteditor und erstellen Sie in dieser Datei ein HTML-Boilerplate.

Schritt 2 − Erstellen Sie nun einen Div-Container, der Bilder (von denen eines ein statisches Bild ist) und ein weiteres Bildsymbol (das angezeigt wird, wenn Sie mit der Maus über das Bild fahren) enthält.

Schritt 3 − Fügen Sie das img-Tag mit dem src-Attribut ein. Fügen Sie den Bildlink zum src-Attribut hinzu.

<img  src="/static/imghw/default1.png"  data-src="https://cdn4.iconfinder.com/data/icons/creative-5/32/text-512.png"  class="lazy" alt="So erstellen Sie ein Bild-Overlay-Symbol mit HTML und CSS" >

Schritt 4 − Fügen Sie nun den Font Awesome CDN-Link in das Head-Tag des HTML-Dokuments ein. CDN-Link unten.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Schritt 5 − Verwenden Sie nun die Benutzersymbolklasse „font Awesome“, um das Overlay-Bild zu erstellen.

<i class="fa fa-user">

Schritt 6−Erstellen Sie nun eine style.css-Datei im selben Ordner und verknüpfen Sie die style.css-Datei mit dem HTML-Dokument.

<link rel="stylesheet" href="style.css">

Schritt 7 − Legen Sie den Stil des HTML-Elements fest und gestalten Sie es so, dass das Overlay angezeigt wird, wenn Sie mit der Maus über das Bild fahren.

Schritt 8 − Die Bildüberlagerung wurde erfolgreich erstellt.

Beispiel

In diesem Beispiel haben wir eine Bildüberlagerung mit einem Bild und einem Awesome-Schriftartsymbol erstellt. Die Benutzersymbolklasse „Font Awesome“ wird aus der Font Awesome-Bibliothek importiert. Um dies zu erstellen, haben wir zwei Dateien in einem Ordner erstellt. Eine Datei enthält index.html, die den Skelettteil der Funktion enthält, und eine andere Datei ist style.css, die die Stile und den Hauptteil der Funktion Work enthält.

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="style.css">
   
   



   

      <img  src="/static/imghw/default1.png"  data-src="https://cdn4.iconfinder.com/data/icons/creative-5/32/text-512.png"  class="lazy" alt="So erstellen Sie ein Bild-Overlay-Symbol mit HTML und CSS" >
      

         
tutorialspoint.com
         
      
   

Die unten angegebenen Bilder sind die Ausgabe des obigen Beispiels, wobei das erste Bild die Ausgabe zeigt, wenn die obige Funktion im Browser geladen wird, und das zweite Bild die Ausgabe zeigt, wenn sich der Cursor über dem ersten Bild bewegt. Wenn also ein Benutzer mit der Maus über das angegebene Bild fährt, wird das überlappende Bild angezeigt.

Fazit

Diese Funktion wird in Anwendungen wie Kontaktbüchern verwendet, bei denen das Profil des Benutzers auf einem Bild angezeigt wird und wenn der Benutzer auf das Bild klickt oder mit der Maus darüber fährt, werden die Details des spezifischen Profils angezeigt. Wenn Sie diese Funktion erstellen, müssen Sie sicherstellen, dass das Bild oder Symbol, das statische Bild und das beim Mouseover angezeigte Bild die gleichen Abmessungen haben, d. h. gleiche Breite und Höhe.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Bild-Overlay-Symbol mit HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!