Wie positioniere ich ein Symbol über einem Bild oder Video und löst beim Klicken einen Download aus?

Ein Symbol über einem Bild oder Video positionieren

Problem:
Sie müssen ein Symbol über einem Bild oder Video positionieren ein Bild oder Video und richten Sie es an der unteren linken Ecke aus. Wenn Sie darauf klicken, sollte das Symbol eine Download-Aufforderung für das Bild auslösen.

Lösung:
Um die gewünschte Positionierung zu erreichen, müssen Sie einen relativen Container um das Bild herum erstellen. Stellen Sie dann die Position des Symbols auf „absolut“ ein. Hier ist ein Codebeispiel:

<code class="css">.container {
  position: relative;
}

.container img {
  display: block;
}

.container .fa-download {
  position: absolute;
  bottom: 0;
  left: 0;
}</code>

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

<div class="container">
  <img src="https://placekitten.com/300/300" />
  <a href="dog.png" download="new-filename"><i class="fas fa-download"></i></a>
</div></code>

Bootstrap 3 Font-Awesome:
Ja, die gleiche Methode funktioniert für Bootstrap 3 Font-Awesome. Ersetzen Sie die Font Awesome-Version im obigen Code durch Folgendes:

<code class="html"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /></code>

<code class="html"><div class="container">
  <img src="https://placekitten.com/300/300" />
  <a href="dog.png" download="new-filename"><i class="fa fa-download"></i></a>
</div></code>

Das obige ist der detaillierte Inhalt vonWie positioniere ich ein Symbol über einem Bild oder Video und löst beim Klicken einen Download aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!