Wie überlagert man ein Bild oder Video in der unteren linken Ecke mit einem Symbol?

Wie man ein Symbol über ein Bild oder Video legt

Einführung

In dieser Frage untersuchen wir Techniken, um ein Symbol über einem Bild oder Video zu positionieren Video, insbesondere in der unteren linken Ecke. Wir untersuchen zwei Methoden: die Verwendung von HTML und CSS und die Verwendung von Bootstrap 3 mit Font Awesome.

Positionieren eines Symbols mit HTML und CSS

Zum Positionieren eines Symbols über einem Bild oder Video mithilfe von HTML und CSS befolgen Sie diese Schritte:

1. Erstellen Sie einen relativen Container um das Bild oder Video.
2. Stellen Sie die Position des Symbols auf absolut ein.
3. Positionieren Sie das Symbol mithilfe von Eigenschaften unten und links.

<code class="html"><div class="container">
   <img src="image.png" alt="Image">
   <a href="icon.png" download="new-filename">
      <i class="fas fa-download"></i>
   </a>
</div></code>

<code class="css">.container { position: relative; }
.container img { display: block; }
.container .fa-download { position: absolute; bottom:0; left:0; }</code>

Positionieren eines Symbols mit Bootstrap 3 und Font Awesome

So positionieren Sie ein Symbol über einem Bild oder Video mit Bootstrap 3 und Font Awesome , folgen Sie diesen Schritten:

1. Fügen Sie die Font Awesome CSS-Bibliothek ein.
2. Erstellen Sie eine Schaltfläche an der gewünschten Position mit der BTN-Klasse und dem Fa-Download-Symbol.

<code class="html"><link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/>

<button class="btn btn-primary fa fa-download" type="button"></button></code>

<code class="css">.container { position: relative; }
.container img { display: block; }
.container .btn { position: absolute; bottom:0; left:0; }</code>

Fazit

Durch die Implementierung dieser Methoden können Sie Symbole effektiv über Bildern oder Videos positionieren und anzeigen, um zusätzliche Funktionalität oder visuelle Hinweise bereitzustellen.

Das obige ist der detaillierte Inhalt vonWie überlagert man ein Bild oder Video in der unteren linken Ecke mit einem Symbol?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!