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="/static/imghwm/default1.png" data-src="https://placekitten.com/300/300" class="lazy" alt="Wie positioniere ich ein Symbol über einem Bild oder Video und löst beim Klicken einen Download aus?" >
  <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="/static/imghwm/default1.png" data-src="https://placekitten.com/300/300" class="lazy" alt="Wie positioniere ich ein Symbol über einem Bild oder Video und löst beim Klicken einen Download aus?" >
  <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!